/* ==========================================================
YOURGURUZ — SHARED DESIGN SYSTEM (app.css · v1.0.0)
Loaded on EVERY page (inc/enqueue.php). This is the single
source of truth for every reusable component:
tokens · container · breadcrumb · section header · page hero
deal card · store card · category card · post card
filter sidebar / bar · tabs · sort · chip row
pagination / load-more · buttons · badges · rating · trust
offer modal shell · archive grid
The internal REHub templates (store / category / search
archives, single offer, blog) and the homepage now share ONE
visual language. Homepage-only section layout stays in
homepage.css, which loads AFTER this file.
Brand: Deep Indigo (--yg-secondary) = structure / headings,
Marigold (--yg-primary) = deal CTA / badge / active state.
Coupon CTA = Deep Indigo so coupons read differently from deals.
Colour tokens (--yg-*) come from :root in style.css.
========================================================== */
/* ---------- 1. scale tokens (shared, responsive) ---------- */
:root{
/* container / spacing come from style.css :root (v4.1.0):
--yg-container --yg-gutter --yg-space --yg-gap */
--yg-r-sm:8px; /* small radius (chips, buttons) */
--yg-r-md:12px; /* medium radius (cards, inputs) */
--yg-r-lg:16px; /* large radius (heroes, panels) */
--yg-r-pill:999px;
--yg-sh-sm:0 1px 2px rgba(20,16,43,.06), 0 1px 3px rgba(20,16,43,.05);
--yg-sh-md:0 4px 16px rgba(20,16,43,.09);
--yg-sh-lg:0 12px 40px rgba(20,16,43,.16);
--yg-ring:0 0 0 3px rgba(255,122,26,.22);
--yg-tint:#FFF1E4; /* marigold 8% */
--yg-card-r:14px;
}
/* ---------- 2. one container, applied to internal pages ----------
The homepage owns .yg-home (style.css v4.1.0). Internal REHub
pages render inside .rh-container, already capped at
--yg-container in style.css. Here we only add the shared
inner rhythm + kill the empty right gutter that appeared when
custom child pages sized their content narrower than the card. */
body:not(.home) #content .rh-container.full_gutenberg{
padding-inline:0 !important;
}
.yg-shell{ font-family:'Manrope', sans-serif; }
.yg-shell *,
.yg-shell *::before,
.yg-shell *::after{ box-sizing:border-box; }
/* ---------- 3. breadcrumb (styled, every internal page) ---------- */
.yg-breadcrumb,
.rh-breadcrumbs .breadcrumb,
#breadcrumb.breadcrumb,
.rank-math-breadcrumb .breadcrumb{
font-family:'Manrope', sans-serif !important;
font-size:12.5px !important;
line-height:1.5;
color:var(--yg-muted) !important;
padding:14px 0 !important;
margin:0 !important;
opacity:1 !important;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:2px 4px;
}
.yg-breadcrumb a,
.rh-breadcrumbs .breadcrumb a,
#breadcrumb.breadcrumb a{
color:var(--yg-secondary) !important;
font-weight:600;
text-decoration:none;
}
.yg-breadcrumb a:hover,
.rh-breadcrumbs .breadcrumb a:hover{ color:var(--yg-primary-hover) !important; }
.yg-breadcrumb .sep,
.rh-breadcrumbs .breadcrumb .delimiter{ color:var(--yg-border); margin:0 3px; }
/* global breadcrumb + trust band (inc/header.php → rehub_action_after_header) */
.yg-breadcrumb__wrap{
background:#fff;
border-bottom:1px solid var(--yg-border);
}
.yg-breadcrumb__row{
max-width:var(--yg-container);
margin-inline:auto;
padding-inline:var(--yg-gutter);
display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.yg-breadcrumb__row .yg-breadcrumb{ min-width:0; }
.yg-breadcrumb__crumbs{ min-width:0; overflow:hidden; }
.yg-breadcrumb__crumbs .yg-breadcrumb{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
/* header trust strip — compact, muted; drops off on small screens.
Scoped selector so it out-specifies the .yg-trust pill base (§7). */
.yg-breadcrumb__row .yg-trust.yg-trust--head{
flex:0 0 auto;
border:0 !important; background:none !important; padding:0 !important;
font-size:11.5px; font-weight:600; color:var(--yg-muted);
}
.yg-breadcrumb__row .yg-trust--head .yg-i{ width:13px; height:13px; color:var(--yg-success); margin-right:2px; }
.yg-breadcrumb__row .yg-trust--head span + span::before{ content:"·"; margin:0 6px; color:var(--yg-border); }
@media (max-width:768px){ .yg-breadcrumb__row .yg-trust--head{ display:none; } }
/* ONE breadcrumb: our header band. Every other breadcrumb the theme /
Yoast / REHub prints in-template is hidden; ours is re-shown. */
body:not(.home) .yg-breadcrumb,
body:not(.home) nav#breadcrumbs,
body:not(.home) span#breadcrumbs,
body:not(.home) p#breadcrumbs,
body:not(.home) .rh-breadcrumbs,
body:not(.home) .rank-math-breadcrumb,
body:not(.home) .rh-post-wrapper > .breadcrumb,
body:not(.home) .woo-tax-name .breadcrumb,
body:not(.home) .breadcrumb:not(.yg-breadcrumb):not(.yg-breadcrumb *),
body:not(.home) .single .post .breadcrumb.rh_opacity_7{ display:none !important; }
body:not(.home) .yg-breadcrumb__wrap .yg-breadcrumb{ display:flex !important; }
/* [yg_deals_page] pages render their own hero → drop the theme page title */
body.yg-deals-tpl .rh-post-wrapper > article > .title,
body.yg-deals-tpl #content > article > .title,
body.yg-deals-tpl .entry-header > .entry-title{ display:none !important; }
body.yg-deals-tpl .yg-deals-page{ max-width:var(--yg-container); margin-inline:auto; padding-inline:var(--yg-gutter); }
/* ---------- 4. section header (shared) ---------- */
.yg-section-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px 16px;
flex-wrap:wrap;
margin:0 0 clamp(14px, 1.5vw, 20px);
}
.yg-section-head__title,
.yg-h{
font-family:'Fraunces', Georgia, serif;
font-weight:700;
color:var(--yg-secondary);
font-size:clamp(19px, 1.3vw + 13px, 26px);
line-height:1.15;
margin:0;
padding-left:14px;
position:relative;
}
.yg-section-head__title::before,
.yg-h::before{
content:"";
position:absolute; left:0; top:50%; transform:translateY(-50%);
width:4px; height:1.05em;
border-radius:var(--yg-r-pill);
background:var(--yg-primary);
}
.yg-section-head__all{
flex:0 0 auto;
font-family:'Manrope', sans-serif;
font-weight:700;
font-size:12.5px;
color:var(--yg-primary-hover);
text-decoration:none;
white-space:nowrap;
border:1px solid var(--yg-border);
border-radius:var(--yg-r-pill);
padding:7px 14px;
background:#fff;
display:inline-flex; align-items:center; gap:6px;
transition:border-color .12s ease, color .12s ease, background .12s ease;
}
.yg-section-head__all:hover{ color:var(--yg-primary); border-color:var(--yg-primary); }
/* ---------- 5. page hero (archive / store / category header card) ---------- */
.yg-hero-card{
background:linear-gradient(180deg, #F4F1FF 0%, #FBFAFF 100%);
border:1px solid var(--yg-border);
border-radius:var(--yg-r-lg);
padding:clamp(18px, 3vw, 28px);
display:grid;
grid-template-columns:auto 1fr;
gap:clamp(14px, 2vw, 24px);
align-items:start;
margin:16px 0 clamp(24px, 4vw, 40px);
}
.yg-hero-card__media{
width:clamp(72px, 9vw, 104px);
height:clamp(72px, 9vw, 104px);
flex:0 0 auto;
border-radius:var(--yg-r-md);
background:#fff;
border:1px solid var(--yg-border);
display:flex; align-items:center; justify-content:center;
padding:12px;
overflow:hidden;
}
.yg-hero-card__media img{ max-width:100%; max-height:100%; width:auto; object-fit:contain; }
.yg-hero-card__body{ min-width:0; }
.yg-hero-card__title{
font-family:'Fraunces', Georgia, serif;
font-weight:700;
color:var(--yg-secondary);
font-size:clamp(22px, 2.2vw + 10px, 34px);
line-height:1.18;
margin:0 0 10px;
}
.yg-hero-card__meta{
display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
margin-bottom:12px;
}
.yg-chip{
display:inline-flex; align-items:center; gap:6px;
font-size:12px; font-weight:700;
color:var(--yg-secondary);
background:#fff;
border:1px solid var(--yg-border);
border-radius:var(--yg-r-pill);
padding:5px 11px;
}
.yg-chip--accent{ color:var(--yg-primary-hover); background:var(--yg-tint); border-color:#F6D9BE; }
.yg-chip .yg-i{ width:13px; height:13px; }
.yg-hero-card__desc{
font-size:13.5px; line-height:1.65; color:var(--yg-muted);
margin:0 0 8px;
}
.yg-hero-card__desc.is-clamped{
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.yg-hero-card__more{
background:none; border:0; padding:0;
font-family:'Manrope', sans-serif;
font-size:12.5px; font-weight:700; color:var(--yg-primary-hover);
cursor:pointer;
}
.yg-hero-card__byline{
font-size:11.5px; color:var(--yg-muted);
border-top:1px solid var(--yg-border);
margin-top:12px; padding-top:10px;
}
/* ---------- 6. RATING (stars) ---------- */
.yg-rating{ display:inline-flex; flex-direction:column; align-items:flex-end; gap:2px; }
.yg-rating__stars{ display:inline-flex; gap:2px; color:#E7E1FA; }
.yg-rating__stars .on{ color:#F5A623; }
.yg-rating__stars svg{ width:16px; height:16px; }
.yg-rating__label{ font-size:11px; font-weight:600; color:var(--yg-muted); }
/* ---------- 7. TRUST strip ---------- */
.yg-trust{
display:inline-flex; align-items:center; gap:8px;
font-size:12px; font-weight:700; color:var(--yg-secondary);
background:#fff; border:1px solid var(--yg-border);
border-radius:var(--yg-r-pill); padding:7px 14px;
}
.yg-trust .yg-i{ width:15px; height:15px; color:var(--yg-success); }
.yg-trust span + span::before{ content:"·"; margin:0 7px; color:var(--yg-border); }
/* ==========================================================
8. THE DEAL CARD (REHub .col_item.offer_grid, re-skinned)
ONE implementation for every context — homepage grids &
carousels, store / category / search archives, single-offer
"related". REHub markup (inc/parts/compact_grid.php):
article.col_item.offer_grid.offer_grid_com.mobile_compact_grid
.info_in_dealgrid
.re-ribbon-badge > span editor corner flag
figure > a.img-centered-flex > img
.grid_desc_and_btn > .grid_row_info
.flowhidden.mb15
.price_for_grid (price OR a text discount label)
.vendor_for_grid > a.admin > img author avatar
h2 > a the title
.verifymeta "Verified"
rh_post_code_loop() coupon reveal block
.mt10.text-center primary CTA
.meta_for_grid (.cat_store_for_grid + .date_for_grid)
Goals: identical footprint, footers aligned across a row, no
mid-card void, no giant flag, no stray avatar, coupon CTA
(indigo) visually distinct from deal CTA (marigold).
========================================================== */
.col_item.offer_grid,
.offer_grid_com{
position:relative;
background:var(--yg-card) !important;
border:1px solid var(--yg-border) !important;
border-radius:var(--yg-card-r) !important;
box-shadow:var(--yg-sh-sm) !important;
overflow:hidden;
display:flex !important;
flex-direction:column;
margin:0 !important;
min-width:0;
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.col_item.offer_grid:hover{
transform:translateY(-3px);
border-color:var(--yg-primary) !important;
box-shadow:var(--yg-sh-md) !important;
}
.col_item.offer_grid .info_in_dealgrid{
padding:14px 14px 10px !important;
flex:0 0 auto;
min-height:0 !important; /* drop REHub flex-helper phantom height */
}
.col_item.offer_grid .grid_desc_and_btn,
.col_item.offer_grid .grid_row_info{ float:none !important; width:100% !important; min-height:0 !important; }
.col_item.offer_grid .grid_row_info > h2:last-child,
.col_item.offer_grid .grid_row_info > .verifymeta:last-child{ margin-bottom:0 !important; }
/* footer meta row */
.col_item.offer_grid > .meta_for_grid{
padding:9px 14px 11px !important;
border-top:1px solid var(--yg-border);
font-size:11px;
color:var(--yg-muted);
display:flex; align-items:center; justify-content:space-between; gap:8px;
}
/* only push the footer down when the grid forces equal-height rows
(>=2 columns) — in 1-column mode cards are natural height, no slack */
@media (min-width:600px){
.col_item.offer_grid > .meta_for_grid{ margin-top:auto; }
}
.col_item.offer_grid > .meta_for_grid .floatleft,
.col_item.offer_grid > .meta_for_grid .floatright{ float:none !important; }
.col_item.offer_grid > .meta_for_grid .cat_for_grid{ display:none; }
.col_item.offer_grid > .meta_for_grid .store_for_grid a,
.col_item.offer_grid > .meta_for_grid .tag_post_store_meta a{
color:var(--yg-secondary) !important; font-weight:700 !important; font-size:11.5px !important;
}
.col_item.offer_grid > .meta_for_grid .date_for_grid .date_ago{ color:var(--yg-muted) !important; font-size:11px; }
.col_item.offer_grid > .mt10.text-center{ margin:0 !important; padding:0 14px 12px !important; }
.col_item.offer_grid .priced_block{ margin:0 !important; }
/* neutralise REHub's <=567px "compact" float variant (splits the
card into a figure/text float pair and breaks the flex column) */
.col_item.offer_grid.mobile_compact_grid figure,
.col_item.offer_grid.mobile_compact_grid .grid_desc_and_btn{
float:none !important; width:100% !important;
margin-left:0 !important; margin-right:0 !important;
}
.col_item.offer_grid.mobile_compact_grid figure img{ height:auto !important; }
/* media: a filled 4:3 frame. Product-deal photos COVER the frame so the
card reads as "full" (no big empty gutters); coupon cards show a store
logo CONTAINED with padding so the mark is never cropped. */
.col_item.offer_grid figure{ margin:0 0 10px !important; }
.col_item.offer_grid figure > a,
.col_item.offer_grid figure .img-centered-flex{
display:flex !important; align-items:center; justify-content:center;
aspect-ratio:4 / 3; width:100%;
background:var(--yg-bg);
border-radius:10px; overflow:hidden; padding:0;
}
.col_item.offer_grid figure img{
width:100% !important; height:100% !important; object-fit:cover; object-position:center;
display:block;
}
/* hide a media frame that only ever held REHub's grey "no image" placeholder */
.col_item.offer_grid figure img[src*="/images/default/noimage"]{ opacity:0; }
.col_item.offer_grid .sale_tag_inwoolist{ min-height:0 !important; }
/* corner flag → small marigold pill; pull its rotated inner span flat */
.col_item.offer_grid .re-ribbon-badge{
position:absolute !important;
top:8px; left:8px; right:auto; bottom:auto;
width:auto !important; height:auto !important;
max-width:calc(100% - 16px);
margin:0 !important; padding:3px 8px !important;
display:inline-flex !important; align-items:center;
font-size:9.5px !important; font-weight:800 !important;
line-height:1.35 !important; letter-spacing:.04em;
text-transform:uppercase; white-space:nowrap; overflow:hidden;
border-radius:var(--yg-r-pill) !important;
background:var(--yg-primary) !important; color:var(--yg-secondary) !important;
box-shadow:0 1px 3px rgba(20,16,43,.25); z-index:2;
}
.col_item.offer_grid .re-ribbon-badge > *,
.col_item.offer_grid .re-ribbon-badge span{
position:static !important; inset:auto !important; transform:none !important;
width:auto !important; height:auto !important; min-width:0 !important;
margin:0 !important; padding:0 !important;
background:transparent !important; color:inherit !important; font:inherit !important;
line-height:inherit !important; letter-spacing:inherit !important;
box-shadow:none !important; border:0 !important; display:inline !important; overflow:visible !important;
}
.col_item.offer_grid .re-ribbon-badge::before,
.col_item.offer_grid .re-ribbon-badge::after{ display:none !important; }
/* % off badge (inside figure) — indigo pill */
.col_item.offer_grid .grid_onsale{
background:var(--yg-secondary) !important; color:#fff !important;
font-family:'Manrope', sans-serif !important;
font-weight:800 !important; border-radius:6px !important;
font-size:11px !important; padding:2px 6px !important;
}
/* stray author avatar — not useful on a coupon card */
.col_item.offer_grid .vendor_for_grid,
.col_item.offer_grid .re_actions_for_grid,
.col_item.offer_grid .two_col_btn_for_grid{ display:none !important; }
.col_item.offer_grid .price_for_grid.floatleft{ float:none !important; width:auto !important; }
.col_item.offer_grid .flowhidden.mb15{ margin-bottom:6px !important; }
/* price line.
REHub's showme=price for a coupon with NO price meta dumps the
offer TITLE into .rh_regular_price (the "old price" slot) — a
struck-through duplicate of the h2. When .rh_regular_price is the
sole child of .price_count it is that junk → hide it. When it sits
NEXT TO a real sale price it is a genuine MRP → keep, struck. */
.col_item.offer_grid .price_for_grid{
color:var(--yg-primary-hover) !important;
font-family:'Manrope', sans-serif !important;
font-weight:800 !important; font-size:11px !important;
letter-spacing:.02em; text-transform:uppercase; line-height:1.3 !important;
}
.col_item.offer_grid .price_count > .rh_regular_price:only-child{ display:none !important; }
.col_item.offer_grid .rh_price_wrapper,
.col_item.offer_grid .price_count{
text-transform:none !important; letter-spacing:0 !important;
}
.col_item.offer_grid .rh_price{
font-size:14px !important; font-weight:800 !important; color:var(--yg-secondary) !important;
}
.col_item.offer_grid .price_count .rh_regular_price{
font-size:12px !important; font-weight:600 !important;
color:var(--yg-muted) !important; text-decoration:line-through;
}
.col_item.offer_grid .rh_price_save,
.col_item.offer_grid .price_save{
color:var(--yg-success) !important; text-transform:none !important; font-size:11.5px !important;
}
/* empty Gutenberg group REHub prints between the info block and CTA */
.col_item.offer_grid > .wp-block-group:empty{ display:none !important; }
.col_item.offer_grid .verifymeta{
color:var(--yg-success) !important; font-weight:700 !important; font-size:11px !important;
}
/* title: 2-line clamp, consistent size, no duplicate */
.col_item.offer_grid .info_in_dealgrid h2,
.col_item.offer_grid .info_in_dealgrid h3{ margin:0 0 6px !important; }
.col_item.offer_grid .info_in_dealgrid h2 a,
.col_item.offer_grid .info_in_dealgrid h3 a,
.col_item.offer_grid .grid_title a{
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
color:var(--yg-secondary) !important;
font-family:'Manrope', sans-serif !important;
font-weight:700 !important; font-size:13.5px !important; line-height:1.35 !important;
}
/* the black paragraph clone REHub prints under the orange title */
.col_item.offer_grid .grid_row_info > .rh_notice_wrap + p,
.col_item.offer_grid .grid_row_info > p.grid_excerpt{ display:none !important; }
.col_item.offer_grid .rh_notice_wrap{
background:var(--yg-tint) !important; border-radius:6px !important;
padding:4px 8px !important; margin:0 0 8px !important;
}
.col_item.offer_grid .rh_custom_notice{
color:var(--yg-primary-hover) !important; font-size:11px !important; font-weight:700 !important;
}
/* --- primary CTA: deal = marigold · coupon = deep indigo --- */
.col_item.offer_grid .btn_offer_block,
.col_item.offer_grid .re_track_btn.blockstyle,
.col_item.offer_grid .wpsm-button,
.col_item.offer_grid .rehub_offer_coupon,
.col_item.offer_grid .coupon_btn{
display:block; width:100%; text-align:center;
font-family:'Manrope', sans-serif !important;
font-weight:700 !important; font-size:13px !important;
border-radius:var(--yg-r-sm) !important;
text-transform:none !important; letter-spacing:0 !important;
padding:11px 14px !important;
border:1px solid transparent !important;
}
.col_item.offer_grid .btn_offer_block,
.col_item.offer_grid .re_track_btn.blockstyle,
.col_item.offer_grid .wpsm-button{
background:var(--yg-primary) !important;
border-color:var(--yg-primary-hover) !important;
color:var(--yg-secondary) !important;
}
.col_item.offer_grid .btn_offer_block:hover,
.col_item.offer_grid .re_track_btn.blockstyle:hover,
.col_item.offer_grid .wpsm-button:hover{ background:var(--yg-primary-hover) !important; }
/* coupon CTA — MASKED (not yet revealed) = the prominent action,
deep indigo solid so it reads differently from a marigold deal. */
.col_item.offer_grid .rehub_offer_coupon.masked_coupon,
.col_item.offer_grid .coupon_btn.masked_coupon,
.col_item.offer_grid .btn_offer_block.rehub_offer_coupon.masked_coupon{
background:var(--yg-secondary) !important;
border-color:var(--yg-secondary) !important;
color:#fff !important;
}
.col_item.offer_grid .rehub_offer_coupon.masked_coupon:hover,
.col_item.offer_grid .coupon_btn.masked_coupon:hover{ background:#241d47 !important; }
/* coupon CTA — REVEALED code chip = dashed indigo on tint */
.col_item.offer_grid .rehub_offer_coupon:not(.masked_coupon),
.col_item.offer_grid .coupon_btn:not(.masked_coupon){
border:1px dashed var(--yg-primary-hover) !important;
background:var(--yg-tint) !important;
color:var(--yg-primary-hover) !important;
}
.col_item.offer_grid .expired_coupon{
background:#EEEAFB !important; color:var(--yg-muted) !important; border-color:var(--yg-border) !important;
}
/* "Show details" toggle the components add under the CTA */
.yg-detail-toggle{
display:inline-flex; align-items:center; gap:5px;
background:none; border:0; padding:8px 0 0;
font-family:'Manrope', sans-serif;
font-size:11.5px; font-weight:700; color:var(--yg-primary-hover);
cursor:pointer;
}
.yg-detail-toggle .yg-i{ width:12px; height:12px; transition:transform .15s ease; }
.yg-detail-toggle[aria-expanded="true"] .yg-i{ transform:rotate(180deg); }
/* ==========================================================
8b. TWO CARD VARIANTS inside the one system
(inc/components.php → yg_tag_deal_cards() adds the class + eyebrow)
.yg-card--coupon → reveal / copy a CODE (indigo CTA)
.yg-card--deal → directly BUY a product (marigold CTA)
.yg-card--product → a deal that also has a real price
Same base .col_item.offer_grid — identical radius, shadow,
spacing, footer, badge and responsive rules. Only the media
treatment, the price emphasis and the type eyebrow differ.
========================================================== */
/* type eyebrow — first line in .grid_row_info */
.col_item.offer_grid .yg-type{
display:inline-flex; align-items:center; gap:5px;
font-family:'Manrope', sans-serif;
font-size:9.5px; font-weight:800; letter-spacing:.06em;
text-transform:uppercase; line-height:1;
margin:0 0 6px;
}
.col_item.offer_grid .yg-type::before{
content:""; width:6px; height:6px; border-radius:var(--yg-r-pill);
}
.col_item.offer_grid .yg-type--coupon{ color:var(--yg-secondary); }
.col_item.offer_grid .yg-type--coupon::before{ background:var(--yg-secondary); }
.col_item.offer_grid .yg-type--deal{ color:var(--yg-primary-hover); }
.col_item.offer_grid .yg-type--deal::before{ background:var(--yg-primary); }
/* --- COUPON card: code-first. Media is a store logo → a clean white
brand strip, logo contained + comfortably sized (never cropped).
.yg-home prefix so this out-specifies homepage.css's figure ratio. --- */
.yg-card--coupon.col_item.offer_grid figure > a,
.yg-card--coupon.col_item.offer_grid figure .img-centered-flex,
.yg-home .yg-card--coupon.col_item.offer_grid figure > a,
.yg-home .yg-card--coupon.col_item.offer_grid figure .img-centered-flex{
background:#fff;
aspect-ratio:auto !important;
height:96px !important; max-height:96px !important;
padding:12px 22px;
}
.yg-card--coupon.col_item.offer_grid figure img{
width:auto !important; height:auto !important;
max-width:80%; max-height:58px;
object-fit:contain; mix-blend-mode:multiply;
}
/* REHub's "no image" placeholder carries no information on a coupon card
(the code is the payload) — drop it and collapse the frame so the card
stays code-first instead of showing an empty band. */
.yg-card--coupon.col_item.offer_grid figure img[src*="noimage"],
.yg-card--coupon.col_item.offer_grid figure img[data-src*="noimage"]{ display:none !important; }
.yg-card--coupon.col_item.offer_grid figure > a:has(img[src*="noimage"]),
.yg-card--coupon.col_item.offer_grid figure > a:has(img[data-src*="noimage"]){
aspect-ratio:auto; max-height:none; min-height:0;
background:none; padding:0;
}
.yg-card--coupon.col_item.offer_grid figure:has(> a img[src*="noimage"]),
.yg-card--coupon.col_item.offer_grid figure:has(> a img[data-src*="noimage"]){ margin-bottom:2px; }
/* the .price_for_grid here is a text discount label → small marigold eyebrow */
.yg-card--coupon.col_item.offer_grid .price_for_grid{ display:block; margin-bottom:2px; }
/* A coupon that happens to sit on a priced product still shows REHub's
product-deal chrome (a "-NN%" flag on the image, a struck MRP). On a
COUPON card the code is the payload, so hide those price-deal signals
— the card must not read as a shopping deal. The image and the
reveal / copy CTA stay. */
.yg-home .yg-card--coupon.col_item.offer_grid .grid_onsale,
.yg-home .yg-card--coupon.col_item.offer_grid .rh_regular_price,
.yg-home .yg-card--coupon.col_item.offer_grid .price_count del,
.yg-home .yg-card--coupon.col_item.offer_grid .price_old{ display:none !important; }
/* --- PRODUCT DEAL card: the product image IS the hero. White field,
taller frame, image contained. No code UI. --- */
.yg-card--deal.col_item.offer_grid figure > a,
.yg-card--deal.col_item.offer_grid figure .img-centered-flex{
background:#fff;
aspect-ratio:4 / 3;
border:1px solid var(--yg-border);
padding:8px;
}
.yg-card--deal.col_item.offer_grid figure img{ mix-blend-mode:multiply; }
/* price row — prominent on deals */
.yg-card--deal.col_item.offer_grid .price_for_grid{
display:flex; flex-wrap:wrap; align-items:baseline; gap:6px;
text-transform:none !important; letter-spacing:0 !important;
margin-bottom:4px;
}
.yg-card--deal.col_item.offer_grid .price_count{
font-size:16px !important; font-weight:800 !important; color:var(--yg-secondary) !important;
}
.yg-card--deal.col_item.offer_grid .rh_regular_price{
font-size:12.5px !important; color:var(--yg-muted) !important; text-decoration:line-through;
}
.yg-card--deal.col_item.offer_grid .grid_onsale{
position:static !important; display:inline-block; margin:0 !important;
background:#E7F6EC !important; color:var(--yg-success) !important;
}
/* a deal never shows coupon-code chrome */
.yg-card--deal.col_item.offer_grid .rehub_offer_coupon,
.yg-card--deal.col_item.offer_grid .coupon_btn,
.yg-card--deal.col_item.offer_grid .masked_coupon:not(figure):not(figure *),
.yg-card--deal.col_item.offer_grid .rh_offer_code{ display:none !important; }
/* deal CTA stays marigold (Stage-1 base already does this) */
.yg-card--deal.col_item.offer_grid .btn_offer_block,
.yg-card--deal.col_item.offer_grid .re_track_btn.blockstyle{
background:var(--yg-primary) !important; color:var(--yg-secondary) !important;
border-color:var(--yg-primary-hover) !important;
}
/* ==========================================================
8c. HOMEPAGE MEDIA PANEL (dynamic — driven by each offer's
WordPress "Featured Image"; no per-card CSS or code)
One composed panel behind every card image so a bare store
logo never floats in dead white space:
• subtle YourGuruz brand wash (indigo → white → marigold)
• COUPON card → logo CONTAINED, never cropped (code is the
payload; a promo creative fills edge-to-edge)
• DEAL card → product photo CONTAINED on the wash, so a
photo shows in full and the panel is still
visually "filled" (the wash is the fill)
• no Featured Image → the wash + a faint "YourGuruz" mark
(tasteful, brand-aligned — nothing invented)
Editors change the visual purely by setting the post's
Featured Image. See inc/homepage.php header for the workflow.
========================================================== */
.yg-home .col_item.offer_grid figure > a,
.yg-home .col_item.offer_grid figure .img-centered-flex{
background:
radial-gradient(125% 125% at 0% 0%, #F1EDFF 0%, rgba(255,255,255,0) 46%),
radial-gradient(135% 150% at 100% 100%, #FFF1E4 0%, rgba(255,255,255,0) 44%),
#fff !important;
position:relative;
}
/* faint brand mark shown only when the frame has no real image
(REHub swaps in its grey noimage_* placeholder, which we hide) */
.yg-home .col_item.offer_grid figure > a::after{
content:"YourGuruz";
position:absolute; inset:0; display:none;
align-items:center; justify-content:center;
font-family:'Fraunces', Georgia, serif; font-weight:600;
font-size:15px; letter-spacing:.01em;
color:rgba(20,16,43,.16); pointer-events:none;
}
.yg-home .col_item.offer_grid figure > a:has(img[src*="noimage"])::after,
.yg-home .col_item.offer_grid figure > a:has(img[data-src*="noimage"])::after,
.yg-home .col_item.offer_grid figure > a:not(:has(img))::after{ display:flex; }
/* DEAL media: contain (no aggressive crop), the brand wash fills
any letterbox so the frame never looks empty. */
.yg-home .yg-card--deal.col_item.offer_grid figure > a,
.yg-home .yg-card--deal.col_item.offer_grid figure .img-centered-flex{
aspect-ratio:4 / 3; height:auto !important; max-height:none !important;
border:1px solid var(--yg-border); padding:10px;
}
.yg-home .yg-card--deal.col_item.offer_grid figure img{
width:100% !important; height:100% !important;
object-fit:contain !important; object-position:center;
mix-blend-mode:multiply;
}
/* a real landscape promo creative (editor-uploaded) still fills
the frame — cover kicks in only when the file is wide. */
.yg-home .yg-card--deal.col_item.offer_grid figure img[width]:not([width="0"]){ }
/* COUPON media: a compact brand strip on the wash — never a blank
band. Tighter panel + a larger logo box so wide wordmark logos
(Cloudways etc.) hold the strip instead of floating small. */
.yg-home .yg-card--coupon.col_item.offer_grid figure > a,
.yg-home .yg-card--coupon.col_item.offer_grid figure .img-centered-flex{
height:78px !important; max-height:78px !important;
padding:8px 18px !important;
border:1px solid var(--yg-border);
}
.yg-home .yg-card--coupon.col_item.offer_grid figure img{
max-width:82% !important; max-height:54px !important;
}
/* the REHub text discount tag (rehub_offer_discount meta) — a
centred brand badge on the wash instead of raw green text */
.yg-home .col_item.offer_grid .sale_tag_inwoolist{
display:flex !important; align-items:center; justify-content:center;
width:100%; height:100%;
}
.yg-home .col_item.offer_grid .sale_tag_inwoolist .font150{
font-family:'Manrope', sans-serif !important;
font-size:20px !important; font-weight:800 !important;
color:var(--yg-secondary) !important;
background:#fff; border:1px solid var(--yg-border);
border-radius:var(--yg-r-pill); padding:6px 16px !important;
box-shadow:var(--yg-sh-sm);
}
/* ==========================================================
9. ARCHIVE GRID — responsive 1 / 2 / 3 / 4 (matches homepage)
REHub prints .eq_grid.rh-flex-eq-height.col_wrap_{third,fourth,
fifth}. On archives it is a bare child of the loop (homepage
wraps it in .yg-grid / .yg-carousel__track — those keep their
own rules in homepage.css and out-specify this).
========================================================== */
body.archive .eq_grid.rh-flex-eq-height,
body.search .eq_grid.rh-flex-eq-height,
body.tax-dealstore .eq_grid.rh-flex-eq-height,
.yg-list .eq_grid.rh-flex-eq-height{
display:grid !important;
grid-template-columns:1fr !important;
grid-auto-rows:auto !important;
gap:var(--yg-gap) !important;
margin:0 !important;
}
body.archive .eq_grid.rh-flex-eq-height > .col_item,
body.search .eq_grid.rh-flex-eq-height > .col_item,
body.tax-dealstore .eq_grid.rh-flex-eq-height > .col_item,
.yg-list .eq_grid.rh-flex-eq-height > .col_item{
float:none !important; width:auto !important;
min-width:0 !important; max-width:none !important; margin:0 !important;
}
@media (min-width:600px){
body.archive .eq_grid.rh-flex-eq-height,
body.search .eq_grid.rh-flex-eq-height,
body.tax-dealstore .eq_grid.rh-flex-eq-height,
.yg-list .eq_grid.rh-flex-eq-height{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
/* rows size to their own content; cards in a row still stretch equal
(grid align-items:stretch). NOT 1fr — that equalises every row to
the tallest row and leaves sparse coupon cards half-empty. */
grid-auto-rows:auto !important;
}
}
@media (min-width:900px){
body.archive .eq_grid.rh-flex-eq-height,
body.search .eq_grid.rh-flex-eq-height,
body.tax-dealstore .eq_grid.rh-flex-eq-height,
.yg-list .eq_grid.rh-flex-eq-height{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
@media (min-width:1200px){
body.archive .eq_grid.rh-flex-eq-height,
body.search .eq_grid.rh-flex-eq-height,
body.tax-dealstore .eq_grid.rh-flex-eq-height,
.yg-list .eq_grid.rh-flex-eq-height{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
}
/* ---------- 10. STORE CARD + STORE DIRECTORY ---------- */
.yg-store-card{
display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; gap:7px;
padding:13px 10px 12px;
background:var(--yg-card);
border:1px solid var(--yg-border);
border-radius:var(--yg-r-md);
box-shadow:var(--yg-sh-sm);
text-decoration:none !important;
min-width:0;
transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.yg-store-card:hover{ transform:translateY(-2px); border-color:var(--yg-primary); box-shadow:var(--yg-sh-md); }
/* logo box: EVERY logo lands in the same 40px-tall, ≤120px-wide
footprint regardless of its native aspect — one visual rhythm */
.yg-store-card__logo{
width:100%; height:40px;
display:flex; align-items:center; justify-content:center;
}
.yg-store-card__logo img{
max-height:34px; max-width:120px; width:auto; height:auto;
object-fit:contain; mix-blend-mode:multiply;
}
.yg-store-card__ini{
width:40px; height:40px; border-radius:11px;
display:flex; align-items:center; justify-content:center;
font-family:'Fraunces', serif; font-weight:700; font-size:15px;
background:var(--yg-tint); color:var(--yg-primary-hover);
}
.yg-store-card__name{
font-family:'Manrope', sans-serif;
font-weight:700; font-size:12.5px; line-height:1.25; color:var(--yg-secondary);
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.yg-store-card__count{
font-weight:700; font-size:10.5px; color:var(--yg-primary-hover);
background:var(--yg-tint); border-radius:var(--yg-r-pill); padding:2px 9px;
}
.yg-store-grid{
display:grid; gap:var(--yg-gap);
grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:520px){ .yg-store-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:768px){ .yg-store-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1000px){ .yg-store-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (min-width:1240px){ .yg-store-grid{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
/* --- directory page chrome (inc/pages.php → [yg_stores_directory]) --- */
.yg-stores{ display:flex; flex-direction:column; gap:clamp(28px, 4vw, 44px); }
.yg-stores__popular,
.yg-stores__all{ min-width:0; }
.yg-stores__toolbar{
display:flex; flex-wrap:wrap; align-items:center; gap:12px;
margin:0 0 20px;
position:sticky; top:0; z-index:20;
background:var(--yg-bg);
padding:10px 0;
}
.yg-store-search{ position:relative; flex:1 1 220px; max-width:300px; }
.yg-store-search .yg-i{
position:absolute; left:13px; top:50%; transform:translateY(-50%);
width:15px; height:15px; color:var(--yg-muted);
}
.yg-store-search input{
width:100%; height:40px;
border:1px solid var(--yg-border); border-radius:var(--yg-r-md);
background:#fff; color:var(--yg-text);
font-family:'Manrope', sans-serif; font-size:13.5px;
padding:0 14px 0 38px;
}
.yg-store-search input:focus{ outline:none; border-color:var(--yg-primary); box-shadow:var(--yg-ring); }
.yg-az{ display:flex; flex-wrap:wrap; gap:5px; }
.yg-az button{
min-width:30px; height:30px; padding:0 7px;
border-radius:8px; border:1px solid var(--yg-border);
background:#fff; color:var(--yg-secondary);
font-family:'Manrope', sans-serif; font-weight:700; font-size:12px;
cursor:pointer;
transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.yg-az button:hover:not(:disabled){ border-color:var(--yg-primary); }
.yg-az button.is-active{ background:var(--yg-primary); color:var(--yg-secondary); border-color:var(--yg-primary-hover); }
.yg-az button:disabled{ opacity:.3; cursor:default; }
/* Mobile: don't let the toolbar eat a quarter of the viewport.
Search takes its own row; A–Z becomes one horizontally-scrollable strip. */
@media (max-width:767px){
.yg-stores__toolbar{ flex-wrap:nowrap; flex-direction:column; align-items:stretch; gap:9px; padding:9px 0; }
.yg-store-search{ flex:1 1 auto; max-width:none; }
.yg-az{
flex-wrap:nowrap; overflow-x:auto; gap:6px;
padding-bottom:2px; scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.yg-az::-webkit-scrollbar{ display:none; }
.yg-az button{ flex:0 0 auto; }
}
.yg-stores__group{ margin-bottom:22px; scroll-margin-top:64px; }
.yg-stores__group:last-child{ margin-bottom:0; }
.yg-stores__letter{
display:flex; align-items:baseline; gap:8px;
font-family:'Fraunces', serif; font-weight:700;
color:var(--yg-secondary); font-size:15px;
margin:0 0 12px; padding-bottom:6px;
border-bottom:1px solid var(--yg-border);
}
.yg-stores__letter span{ font-family:'Manrope', sans-serif; font-size:11px; font-weight:700; color:var(--yg-muted); }
.yg-stores__empty{ text-align:center; color:var(--yg-muted); font-size:14px; padding:28px 0; }
/* ---------- 11. CATEGORY CARD ---------- */
.yg-cat-card{
display:flex; align-items:center; gap:12px;
padding:14px 16px;
background:var(--yg-card);
border:1px solid var(--yg-border);
border-radius:var(--yg-r-md);
box-shadow:var(--yg-sh-sm);
text-decoration:none !important;
transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.yg-cat-card:hover{ transform:translateY(-2px); border-color:var(--yg-primary); box-shadow:var(--yg-sh-md); }
.yg-cat-card__icn{
width:38px; height:38px; flex:0 0 auto;
border-radius:11px; background:var(--yg-tint); color:var(--yg-primary-hover);
display:flex; align-items:center; justify-content:center;
}
.yg-cat-card__icn .yg-i{ width:19px; height:19px; }
.yg-cat-card__t{ font-family:'Fraunces', serif; font-weight:700; font-size:15px; color:var(--yg-secondary); line-height:1.2; }
.yg-cat-card__c{ font-size:11.5px; font-weight:700; color:var(--yg-primary-hover); }
.yg-cat-grid{
display:grid; gap:var(--yg-gap);
grid-template-columns:repeat(1,minmax(0,1fr));
}
@media (min-width:560px){ .yg-cat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:900px){ .yg-cat-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1200px){ .yg-cat-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
/* compat: the /categories/ shortcode still emits .yg-catgrid /
.yg-cat-card__name / __count (Stage 6 rebuilds it). Keep it tidy. */
.yg-catgrid{
display:grid; gap:var(--yg-gap);
grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:560px){ .yg-catgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:900px){ .yg-catgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.yg-catgrid .yg-cat-card{ flex-direction:column; align-items:flex-start; gap:4px; padding:16px; }
.yg-cat-card__name{ font-family:'Fraunces', serif; font-weight:700; font-size:15px; color:var(--yg-secondary); line-height:1.2; }
.yg-cat-card__count{ font-family:'Manrope', sans-serif; font-weight:700; font-size:12px; color:var(--yg-primary-hover); }
/* REHub mobile splash search (#rhSplashSearch) — replaced by the
child's .yg-msearch bar (Stage 2). Keep it out of the flow. */
#rhSplashSearch{ display:none !important; }
body.rh-active-search #rhSplashSearch,
body.re-search-active #rhSplashSearch{ display:block !important; }
/* ---------- 12. POST CARD (blog) ---------- */
.yg-post-card{
display:flex; flex-direction:column;
background:var(--yg-card);
border:1px solid var(--yg-border);
border-radius:var(--yg-r-md);
box-shadow:var(--yg-sh-sm);
overflow:hidden;
transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.yg-post-card:hover{ transform:translateY(-3px); border-color:var(--yg-primary); box-shadow:var(--yg-sh-md); }
.yg-post-card__thumb{
aspect-ratio:16 / 9; width:100%; background:var(--yg-bg);
overflow:hidden; display:block;
}
.yg-post-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.yg-post-card__body{ padding:14px 15px 16px; display:flex; flex-direction:column; gap:7px; flex:1 1 auto; }
.yg-post-card__cat{
align-self:flex-start;
font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
color:var(--yg-primary-hover); background:var(--yg-tint);
border-radius:var(--yg-r-pill); padding:3px 9px;
}
.yg-post-card__t{
font-family:'Fraunces', serif; font-weight:700; font-size:16px; line-height:1.3;
color:var(--yg-secondary); margin:0;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.yg-post-card__t a{ color:inherit; text-decoration:none; }
.yg-post-card__meta{ margin-top:auto; font-size:11px; color:var(--yg-muted); display:flex; gap:6px; flex-wrap:wrap; }
/* ---------- 13. FILTER sidebar + bar ---------- */
.yg-results{
display:grid;
grid-template-columns:1fr;
gap:clamp(16px, 2.5vw, 28px);
align-items:start;
}
@media (min-width:900px){ .yg-results{ grid-template-columns:236px minmax(0,1fr); } }
.yg-filters{
background:var(--yg-card);
border:1px solid var(--yg-border);
border-radius:var(--yg-r-md);
padding:16px;
}
@media (min-width:900px){ .yg-filters{ position:sticky; top:16px; } }
.yg-filters__head{
display:flex; align-items:center; justify-content:space-between;
font-family:'Fraunces', serif; font-weight:700; font-size:15px; color:var(--yg-secondary);
margin-bottom:10px;
}
.yg-filters__clear{ font-family:'Manrope',sans-serif; font-size:11.5px; font-weight:700; color:var(--yg-primary-hover); background:none; border:0; cursor:pointer; }
.yg-fgroup{ border-top:1px solid var(--yg-border); padding:12px 0 4px; }
.yg-fgroup > summary,
.yg-fgroup__t{
display:flex; align-items:center; justify-content:space-between;
font-weight:700; font-size:13px; color:var(--yg-secondary);
cursor:pointer; list-style:none; margin-bottom:8px;
}
.yg-fgroup > summary::-webkit-details-marker{ display:none; }
.yg-fgroup > summary .yg-i{ width:16px; height:16px; flex:0 0 auto; color:var(--yg-muted); transition:transform .15s ease; }
.yg-fgroup[open] > summary .yg-i{ transform:rotate(180deg); }
.yg-fgroup__list{ max-height:220px; overflow-y:auto; scrollbar-width:thin; display:flex; flex-direction:column; gap:2px; }
.yg-fopt{
display:flex; align-items:center; gap:8px;
font-size:12.5px; color:var(--yg-text);
padding:5px 4px; border-radius:6px; cursor:pointer;
}
.yg-fopt:hover{ background:var(--yg-bg); }
.yg-fopt input{ accent-color:var(--yg-primary); }
.yg-fopt__c{ margin-left:auto; font-size:11px; color:var(--yg-muted); }
/* toolbar above the list: search · tabs · sort · chips · count */
.yg-toolbar{ display:flex; flex-direction:column; gap:12px; margin-bottom:14px; }
.yg-toolbar__search{ position:relative; }
.yg-toolbar__search input{
width:100%; height:44px;
border:1px solid var(--yg-border); border-radius:var(--yg-r-md);
background:#fff; color:var(--yg-text);
font-family:'Manrope', sans-serif; font-size:14px;
padding:0 16px 0 42px;
}
.yg-toolbar__search input:focus{ outline:none; border-color:var(--yg-primary); box-shadow:var(--yg-ring); }
.yg-toolbar__search .yg-i{ position:absolute; left:15px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--yg-muted); }
.yg-toolbar__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.yg-tabs{ display:flex; gap:2px; }
.yg-tabs a, .yg-tabs button{
font-family:'Manrope', sans-serif; font-weight:700; font-size:13px;
color:var(--yg-muted); background:none; border:0; cursor:pointer;
padding:8px 12px; text-decoration:none; position:relative;
}
.yg-tabs a.is-active, .yg-tabs button.is-active{ color:var(--yg-secondary); }
.yg-tabs a.is-active::after, .yg-tabs button.is-active::after{
content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px;
background:var(--yg-primary); border-radius:2px;
}
.yg-sort{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--yg-muted); }
.yg-sort select{
font-family:'Manrope', sans-serif; font-weight:700; font-size:12.5px; color:var(--yg-secondary);
border:1px solid var(--yg-border); border-radius:var(--yg-r-sm);
background:#fff; padding:6px 26px 6px 10px; cursor:pointer;
-webkit-appearance:none; appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 8px center; background-size:12px;
}
.yg-sort select:focus{ outline:none; border-color:var(--yg-primary); box-shadow:var(--yg-ring); }
.yg-chiprow{
display:flex; gap:8px; overflow-x:auto; padding-bottom:2px;
scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.yg-chiprow::-webkit-scrollbar{ display:none; }
.yg-chiprow a, .yg-chiprow button{
flex:0 0 auto;
font-family:'Manrope', sans-serif; font-weight:700; font-size:12.5px;
color:var(--yg-secondary); background:#fff;
border:1px solid var(--yg-border); border-radius:var(--yg-r-pill);
padding:7px 14px; white-space:nowrap; cursor:pointer; text-decoration:none;
transition:border-color .12s ease, background .12s ease, color .12s ease;
}
.yg-chiprow a:hover, .yg-chiprow button:hover{ border-color:var(--yg-primary); }
.yg-chiprow a.is-active, .yg-chiprow button.is-active{
background:var(--yg-primary); color:var(--yg-secondary); border-color:var(--yg-primary-hover);
}
.yg-count{ font-size:12px; color:var(--yg-muted); font-weight:600; }
/* freshness indicator — real data (WP post_modified of the store's most
recently touched offer), never today's date. Secondary to the count
text: same line, lighter weight, a hairline divider, no badge/pill. */
.yg-count__updated{
font-weight:500; color:var(--yg-muted); opacity:.8;
margin-left:8px; padding-left:10px; border-left:1px solid var(--yg-border);
}
/* REHub's own filter panel (used by homepage cat tabs) → chip look */
.re_filter_panel ul.re_filter_ul,
.re_filter_instore ul.re_filter_ul{
display:flex !important; gap:8px !important; flex-wrap:nowrap !important;
list-style:none !important; margin:0 !important; padding:2px 0 6px !important;
overflow-x:auto; scrollbar-width:none;
}
.re_filter_panel ul.re_filter_ul::-webkit-scrollbar{ display:none; }
.re_filter_panel ul.re_filter_ul li{ margin:0 !important; flex:0 0 auto; }
.re_filter_panel ul.re_filter_ul li span,
.re_filtersort_btn{
display:inline-block; font-weight:700; font-size:12.5px;
padding:8px 14px; border-radius:var(--yg-r-pill);
background:#fff; color:var(--yg-secondary);
border:1px solid var(--yg-border); cursor:pointer; white-space:nowrap;
}
.re_filter_panel ul.re_filter_ul li span.active,
.re_filtersort_btn.active{
background:var(--yg-primary) !important; color:var(--yg-secondary) !important;
border-color:var(--yg-primary-hover) !important;
}
/* ---------- 14. PAGINATION / LOAD MORE ---------- */
.wp-pagenavi, .rh_pagination, .pagination, nav.navigation{
display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
margin:24px 0 8px;
}
.wp-pagenavi a, .wp-pagenavi span,
.pagination a, .pagination span,
.page-numbers{
min-width:38px; height:38px; padding:0 10px;
display:inline-flex; align-items:center; justify-content:center;
font-family:'Manrope', sans-serif; font-weight:700; font-size:13px;
border:1px solid var(--yg-border); border-radius:var(--yg-r-sm);
background:#fff; color:var(--yg-secondary); text-decoration:none;
}
.wp-pagenavi a:hover, .pagination a:hover, .page-numbers:hover{ border-color:var(--yg-primary); }
.wp-pagenavi .current, .pagination .current, .page-numbers.current{
background:var(--yg-secondary); color:#fff; border-color:var(--yg-secondary);
}
.yg-loadmore{
display:block; margin:22px auto 4px;
font-family:'Manrope', sans-serif; font-weight:700; font-size:13px;
color:var(--yg-secondary); background:#fff;
border:1px solid var(--yg-border); border-radius:var(--yg-r-pill);
padding:11px 28px; cursor:pointer;
}
.yg-loadmore:hover{ border-color:var(--yg-primary); }
.yg-loadmore[disabled]{ opacity:.5; cursor:default; }
/* REHub "Show next" archive buttons (compact grid + in-store filter) */
a.rh-load-more, .rh-load-more a, .re_load_more,
.re_ajax_pagination_btn, .re_ajax_pagination .re_ajax_pagination_btn{
display:inline-block;
font-family:'Manrope', sans-serif; font-weight:700; font-size:13px !important;
color:var(--yg-secondary) !important; background:#fff !important;
border:1px solid var(--yg-border) !important; border-radius:var(--yg-r-pill) !important;
padding:11px 28px !important; cursor:pointer;
transition:border-color .12s ease, background .12s ease;
}
a.rh-load-more:hover, .re_load_more:hover,
.re_ajax_pagination_btn:hover{ border-color:var(--yg-primary) !important; background:var(--yg-tint) !important; }
.re_ajax_pagination{ text-align:center; margin:22px 0 4px; }
/* ---------- 15. BUTTONS (shared primitives) ---------- */
.yg-btn{
display:inline-flex; align-items:center; justify-content:center; gap:7px;
font-family:'Manrope', sans-serif; font-weight:700; font-size:13px; line-height:1;
padding:11px 18px; border-radius:var(--yg-r-sm);
text-decoration:none; cursor:pointer; border:1px solid transparent;
transition:transform .14s ease, background .14s ease, border-color .14s ease;
}
.yg-btn .yg-i{ width:15px; height:15px; }
.yg-btn--primary{ background:var(--yg-primary); color:var(--yg-secondary); border-color:var(--yg-primary-hover); }
.yg-btn--primary:hover{ background:var(--yg-primary-hover); transform:translateY(-1px); }
.yg-btn--indigo{ background:var(--yg-secondary); color:#fff; border-color:var(--yg-secondary); }
.yg-btn--indigo:hover{ background:#241d47; transform:translateY(-1px); }
.yg-btn--ghost{ background:#fff; color:var(--yg-secondary); border-color:var(--yg-border); }
.yg-btn--ghost:hover{ border-color:var(--yg-primary); }
.yg-btn--sm{ padding:8px 13px; font-size:12px; }
.yg-btn--block{ width:100%; }
.yg-badge{
display:inline-flex; align-items:center; gap:4px;
font-family:'Manrope', sans-serif; font-weight:800; font-size:9.5px;
letter-spacing:.04em; text-transform:uppercase;
border-radius:var(--yg-r-pill); padding:3px 8px;
background:var(--yg-primary); color:var(--yg-secondary);
}
.yg-badge--verified{ background:#E7F6EC; color:var(--yg-success); }
.yg-badge--exclusive{ background:var(--yg-secondary); color:#fff; }
/* ---------- 16. OFFER / COUPON MODAL shell ----------
Centered, viewport-aware, Safari/WebKit-safe (dvh with a vh fallback;
safe-area insets on the padded overlay). The overlay is a flex box and
the panel uses margin:auto so it stays centered AND scrollable. */
.yg-modal{
position:fixed; inset:0; z-index:100000; display:none;
padding:24px 16px;
padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.yg-modal.is-open{ display:flex; }
.yg-modal__scrim{ position:fixed; inset:0; z-index:1; background:rgba(20,16,43,.55); }
.yg-modal__panel{
position:relative; z-index:2; margin:auto;
width:min(440px, 100%);
max-height:100%;
background:#fff; border-radius:var(--yg-r-lg);
box-shadow:var(--yg-sh-lg);
display:flex; flex-direction:column; overflow:hidden;
}
@supports (height: 100dvh){
.yg-modal__panel{ max-height:min(100%, calc(100dvh - 32px)); }
}
@media (max-width:520px){
.yg-modal{ padding:0; }
.yg-modal__panel{
margin:auto 0 0; width:100%;
max-height:92vh; max-height:92dvh;
border-radius:var(--yg-r-lg) var(--yg-r-lg) 0 0;
}
}
.yg-modal__head{
flex:0 0 auto;
display:flex; align-items:center; justify-content:space-between;
padding:15px 16px 15px 18px; border-bottom:1px solid var(--yg-border);
font-family:'Fraunces', serif; font-weight:700; font-size:16px; color:var(--yg-secondary);
}
.yg-modal__close{
flex:0 0 auto; background:var(--yg-bg); border:0; cursor:pointer;
color:var(--yg-secondary); width:36px; height:36px; border-radius:var(--yg-r-pill);
display:flex; align-items:center; justify-content:center;
}
.yg-modal__close .yg-i{ width:17px; height:17px; }
.yg-modal__close:hover{ background:var(--yg-border); }
.yg-modal__body{ flex:1 1 auto; min-height:0; padding:18px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.yg-modal__foot{
flex:0 0 auto; padding:14px 18px; border-top:1px solid var(--yg-border);
padding-bottom:calc(14px + env(safe-area-inset-bottom));
}
.yg-tc{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.yg-tc li{ display:flex; gap:8px; font-size:13px; line-height:1.55; color:var(--yg-text); }
.yg-tc li .yg-i{ flex:0 0 auto; width:14px; height:14px; margin-top:3px; color:var(--yg-success); }
body.yg-modal-open{ overflow:hidden; }
/* Show-details body content (yg-app.js initOfferModal) */
.yg-modal__body .yg-modal-benefit{
font-weight:800; font-size:14px; color:var(--yg-primary-hover);
background:var(--yg-tint); border-radius:var(--yg-r-sm);
padding:8px 12px; margin:0 0 12px;
}
.yg-modal__body .yg-modal-facts{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.yg-modal__body .yg-modal-fact{
font-size:11.5px; font-weight:700; color:var(--yg-secondary);
background:var(--yg-bg); border:1px solid var(--yg-border);
border-radius:var(--yg-r-pill); padding:3px 10px;
}
.yg-modal__body .yg-modal-fact--ok{ color:var(--yg-success); background:#E7F6EC; border-color:#CDEBD6; }
.yg-modal__body .yg-modal-fact--warn{ color:var(--yg-muted); }
.yg-modal__body .yg-modal-h{
font-family:'Manrope',sans-serif; font-weight:800; font-size:11px;
letter-spacing:.05em; text-transform:uppercase; color:var(--yg-muted);
margin:14px 0 6px;
}
.yg-modal__body .yg-modal-h:first-child{ margin-top:0; }
.yg-modal__body p{ font-size:13px; line-height:1.6; color:var(--yg-text); margin:0 0 8px; }
/* ---- coupon reveal modal body (yg-app.js initCouponReveal) ---- */
.yg-cpn-codebox{
display:flex; align-items:stretch; gap:0;
border:2px dashed var(--yg-primary); border-radius:var(--yg-r-md);
background:var(--yg-tint); overflow:hidden; margin:0 0 8px;
}
.yg-cpn-code{
flex:1 1 auto; min-width:0;
display:flex; align-items:center; justify-content:center;
font-family:'Manrope', ui-monospace, monospace;
font-weight:800; font-size:clamp(17px, 4.5vw, 22px); letter-spacing:.08em;
color:var(--yg-secondary); padding:12px 10px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
user-select:all; -webkit-user-select:all;
}
.yg-cpn-copy{
flex:0 0 auto; cursor:pointer; border:0;
border-left:2px dashed var(--yg-primary);
background:var(--yg-primary); color:var(--yg-secondary);
font-family:'Manrope', sans-serif; font-weight:800; font-size:12.5px;
padding:0 16px; min-width:92px;
display:flex; align-items:center; justify-content:center; gap:6px;
transition:background .14s ease;
}
.yg-cpn-copy:hover{ background:var(--yg-primary-hover); }
.yg-cpn-copy .yg-i{ stroke:currentColor; }
.yg-cpn-copy__done{ display:none; align-items:center; gap:6px; }
.yg-cpn-codebox.is-copied .yg-cpn-copy{ background:var(--yg-success); color:#fff; border-left-color:var(--yg-success); }
.yg-cpn-codebox.is-copied .yg-cpn-copy__idle{ display:none; }
.yg-cpn-codebox.is-copied .yg-cpn-copy__done{ display:flex; }
.yg-cpn-codebox.is-copied{ border-color:var(--yg-success); }
.yg-cpn-status{
font-size:12px; line-height:1.5; color:var(--yg-muted); margin:0 0 14px;
}
.yg-cpn-status.is-ok{ color:var(--yg-success); font-weight:700; }
.yg-cpn-status.is-ok::before{ content:"✓ "; }
.yg-cpn-store{
display:flex; align-items:center; gap:8px; margin:0 0 4px;
font-size:12.5px; font-weight:700; color:var(--yg-secondary);
}
.yg-cpn-store img{ width:22px; height:22px; object-fit:contain; border-radius:5px; }
.yg-cpn-offer{ font-weight:700; color:var(--yg-secondary); font-size:13.5px; margin:0 0 6px; }
.yg-modal__body .yg-btn--block{ width:100%; }
/* ============================================================
16b. REHub PGW COUPON POPUP (.pgwModal.coupon-reveal-popup)
Only reached via a shared/bookmarked ?codeid= / ?codetext= link — the
normal in-page click is handled by yg-app.js initCouponReveal(). This
still re-skins + centres + hardens that fallback modal. REHub's
reveal/copy/affiliate JS is untouched.
ROOT CAUSE of the old "stuck to the left": PGW makes .pm-container a
static block; without `margin:auto` (and with our width cap) it sat at
the left edge. Fix = flex overlay + margin:auto.
============================================================ */
#pgwModalBackdrop.pgwModalBackdrop{ background:rgba(20,16,43,.58) !important; }
body.pgwModalOpen{ padding-right:0 !important; } /* PGW's scrollbar-comp shim off-centres the modal — drop it */
.pgwModal.coupon-reveal-popup{
display:flex !important; overflow-y:auto; overflow-x:hidden;
padding:24px 16px !important;
padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) !important;
}
.pgwModal.coupon-reveal-popup .pm-container{
position:relative !important;
margin:auto !important;
width:min(420px, 100%) !important;
max-width:100% !important;
max-height:100%;
overflow-y:auto; -webkit-overflow-scrolling:touch;
border-radius:var(--yg-r-lg) !important;
background:#fff !important;
box-shadow:0 24px 60px -12px rgba(20,16,43,.45) !important;
}
@supports (height: 100dvh){
.pgwModal.coupon-reveal-popup .pm-container{ max-height:min(100%, calc(100dvh - 32px)); }
}
.pgwModal.coupon-reveal-popup .pm-body{
display:block !important; width:100% !important; max-width:none !important;
margin:0 !important;
}
.pgwModal.coupon-reveal-popup .pm-content{ padding:0 !important; }
.pgwModal.coupon-reveal-popup .pm-close{
position:absolute !important; top:10px !important; right:10px !important;
width:40px !important; height:40px !important; line-height:0 !important;
font-size:0 !important; color:transparent !important;
background:#fff no-repeat center / 16px 16px !important;
background-image:url("data:image/svg+xml;utf8,") !important;
border-radius:var(--yg-r-pill) !important; z-index:6 !important;
opacity:1 !important; cursor:pointer; border:0 !important;
box-shadow:0 2px 12px rgba(20,16,43,.32) !important;
}
.pgwModal.coupon-reveal-popup .pm-close::before,
.pgwModal.coupon-reveal-popup .pm-close::after{ content:none !important; }
.pgwModal.coupon-reveal-popup .pm-close > i,
.pgwModal.coupon-reveal-popup .pm-close .rhicon{ display:none !important; }
.pgwModal.coupon-reveal-popup .pm-close:hover{ background-color:var(--yg-bg) !important; }
.pgwModal.coupon-reveal-popup .pm-close:active{ transform:scale(.94); }
.pgwModal.coupon-reveal-popup .coupon_top_part{
background:linear-gradient(160deg, var(--yg-secondary) 0%, #2a2154 100%) !important;
padding:34px 22px 26px !important; text-align:center;
}
.pgwModal.coupon-reveal-popup .re_title_inmodal{
font-family:'Fraunces',serif !important; font-weight:700 !important;
font-size:19px !important; color:#fff !important; padding:0 !important; margin:0 0 4px !important;
}
.pgwModal.coupon-reveal-popup .add_modal_coupon{ font-size:12px !important; color:rgba(255,255,255,.8) !important; margin:0 0 16px; }
.pgwModal.coupon-reveal-popup .text_copied_coupon{ color:#8CE0A6 !important; }
.pgwModal.coupon-reveal-popup .coupon_modal_coupon{ margin:0 !important; }
.pgwModal.coupon-reveal-popup .cpn_modal_container{
background:#fff !important; border:2px dashed var(--yg-primary) !important;
border-radius:var(--yg-r-md) !important; padding:12px 14px !important;
display:flex !important; align-items:center; justify-content:center;
}
.pgwModal.coupon-reveal-popup input.code{
font-family:'Manrope',ui-monospace,monospace !important;
font-weight:800 !important; font-size:18px !important; letter-spacing:.08em !important;
color:var(--yg-secondary) !important; background:transparent !important;
border:0 !important; text-align:center !important; width:100% !important; padding:0 !important;
}
.pgwModal.coupon-reveal-popup .cpn_btn_inner{
display:block !important; margin:18px 22px 6px !important;
background:var(--yg-primary) !important; color:var(--yg-secondary) !important;
font-family:'Manrope',sans-serif !important; font-weight:800 !important;
font-size:15px !important; text-decoration:none !important;
border-radius:var(--yg-r-md) !important; padding:13px 18px !important;
text-align:center; box-shadow:none !important;
}
.pgwModal.coupon-reveal-popup .cpn_btn_inner:hover{ background:var(--yg-primary-hover) !important; }
.pgwModal.coupon-reveal-popup .cpn_info_bl{
padding:6px 22px 20px !important; font-size:11.5px !important;
color:var(--yg-muted) !important; text-align:center;
}
.pgwModal.coupon-reveal-popup .coupon_modal_coupon a[href*="print"],
.pgwModal.coupon-reveal-popup .print_coupon{ font-size:11px !important; color:rgba(255,255,255,.75) !important; }
/* ---------- 17. REHub archive chrome cleanup ---------- */
.rh-mini-sidebar .re_filter_instore,
.woo-tax-more-info,
.rh-cartbox .rh_offer_disclaimer{ font-size:12px; }
.term-description, .category-description, .archive-description,
.main-side .term-description{
color:var(--yg-muted); font-size:14px; line-height:1.7; margin:0 0 18px;
}
/* SEO body content that REHub prints below the loop */
.rh-post-inner-content,
.rh_content_below_grid,
.tax_content_bottom{
font-family:'Manrope', sans-serif;
color:var(--yg-text); font-size:15px; line-height:1.75;
max-width:820px; margin-top:8px;
}
.rh-post-inner-content h2,
.rh-post-inner-content h3,
.tax_content_bottom h2,
.tax_content_bottom h3{
font-family:'Fraunces', serif; color:var(--yg-secondary);
}
.rh-post-inner-content table{ font-size:13.5px; }
/* ---------- 18. STORE PAGE (taxonomy-dealstore.php child template) ----------
ORIGINAL YourGuruz / REHub store-page STRUCTURE preserved:
┌ left sidebar : identity card · Categories · Other shops
└ main column : title + description · discovery bar · compact
HORIZONTAL offer list (.rh_offer_list, re-skinned).
Only the presentation is modernised. Reuses §6 rating, §13
.re_filter_panel pills + .yg-sort, §14 pagination, §15 buttons. */
.yg-store.yg-shell{
display:grid; grid-template-columns:1fr; align-items:start;
gap:clamp(18px,3vw,30px); margin:14px auto 0;
}
@media (min-width:1000px){
.yg-store.yg-shell{ grid-template-columns:284px minmax(0,1fr); gap:clamp(22px,3vw,38px); }
}
/* ===== LEFT SIDEBAR ===== */
.yg-store__side{ display:flex; flex-direction:column; gap:14px; min-width:0; }
@media (min-width:1000px){ .yg-store__side{ position:sticky; top:16px; } }
/* below the split: identity card leads, then the offers, then the
supplementary Categories / Other-shops modules. */
@media (max-width:999px){
.yg-store__side{ display:contents; }
.yg-store__idcard{ order:1; }
.yg-store__main{ order:2; }
.yg-store__module{ order:3; }
}
.yg-store__idcard{
background:var(--yg-card); border:1px solid var(--yg-border);
border-radius:var(--yg-r-lg); box-shadow:var(--yg-sh-sm);
padding:18px 16px;
display:flex; flex-direction:column; align-items:center; gap:7px;
}
.yg-store__logo{
width:100%; height:56px; display:flex; align-items:center; justify-content:center;
}
.yg-store__logo img{ max-width:150px; max-height:52px; width:auto; object-fit:contain; mix-blend-mode:multiply; }
.yg-store__ini{
width:54px; height:54px; border-radius:14px;
display:flex; align-items:center; justify-content:center;
font-family:'Fraunces',serif; font-weight:700; font-size:20px;
background:var(--yg-tint); color:var(--yg-primary-hover);
}
.yg-store__ini--sm{ width:24px; height:24px; border-radius:7px; font-size:10px; }
.yg-store__name{
font-family:'Fraunces',serif; font-weight:700; font-size:17px;
color:var(--yg-secondary); margin:2px 0 0; line-height:1.2; text-align:center;
}
.yg-store__rating{ display:flex; justify-content:center; }
.yg-store__rating .yg-rating{ flex-direction:row; align-items:center; gap:6px; }
.yg-store__rating .yg-rating__label{ font-size:11px; }
.yg-store__facts{
list-style:none; margin:6px 0 0; padding:0; width:100%;
display:flex; flex-direction:column; gap:6px;
font-size:12px; color:var(--yg-secondary);
}
.yg-store__facts li{ display:flex; align-items:center; gap:8px; }
.yg-store__facts .yg-i{ width:14px; height:14px; color:var(--yg-primary); flex:0 0 auto; }
.yg-store__visit{ width:100%; margin-top:8px; }
.yg-store__blurb{
font-size:12px; line-height:1.6; color:var(--yg-muted);
width:100%; margin-top:6px;
}
.yg-store__blurb.is-clamped{
display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.yg-store__module{
background:var(--yg-card); border:1px solid var(--yg-border);
border-radius:var(--yg-r-lg); box-shadow:var(--yg-sh-sm);
padding:14px;
}
.yg-store__module-h{
font-family:'Manrope',sans-serif; font-weight:800; font-size:11px;
letter-spacing:.06em; text-transform:uppercase; color:var(--yg-muted);
margin:0 0 8px;
}
.yg-store__catlist{ list-style:none; margin:0; padding:0; max-height:280px; overflow-y:auto; scrollbar-width:thin; }
.yg-store__catlist a{
display:block; padding:6px 8px; border-radius:var(--yg-r-sm);
font-size:12.5px; color:var(--yg-secondary); text-decoration:none; line-height:1.35;
}
.yg-store__catlist a:hover{ background:var(--yg-bg); }
.yg-store__catlist a.is-active{ background:var(--yg-tint); color:var(--yg-primary-hover); font-weight:700; }
.yg-store__shoplist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; }
.yg-store__shoplist a{
display:flex; align-items:center; gap:9px; padding:6px;
border-radius:var(--yg-r-sm); text-decoration:none; color:var(--yg-secondary);
}
.yg-store__shoplist a:hover{ background:var(--yg-bg); }
.yg-store__shopimg{
width:26px; height:26px; flex:0 0 auto;
border:1px solid var(--yg-border); border-radius:7px; background:#fff;
display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.yg-store__shopimg img{ max-width:100%; max-height:20px; width:auto; object-fit:contain; mix-blend-mode:multiply; }
.yg-store__shopname{
flex:1 1 auto; min-width:0; font-size:12.5px; font-weight:600;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.yg-store__shopc{ flex:0 0 auto; font-size:11px; font-weight:700; color:var(--yg-muted); }
.yg-store__allshops{ display:inline-block; margin-top:9px; }
.yg-linkbtn{
background:none; border:0; padding:0; cursor:pointer;
font-family:'Manrope',sans-serif; font-weight:700; font-size:12px;
color:var(--yg-primary-hover); text-decoration:none;
}
.yg-linkbtn:hover{ text-decoration:underline; }
/* ===== MAIN COLUMN ===== */
.yg-store__main{ min-width:0; display:flex; flex-direction:column; gap:13px; }
.yg-store__title{
font-family:'Fraunces',Georgia,serif; font-weight:700;
color:var(--yg-secondary); line-height:1.18;
font-size:clamp(21px,1.5vw+12px,29px); margin:0 0 8px;
}
.yg-store__intro{ font-size:13.5px; line-height:1.7; color:var(--yg-muted); }
.yg-store__intro p{ margin:0 0 8px; }
.yg-store__intro p:last-child{ margin:0; }
.yg-store__intro.is-clamped{
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.yg-store__head .yg-linkbtn{ margin-top:4px; }
.yg-store__bar{ display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; }
.yg-store__search{ position:relative; flex:1 1 240px; min-width:0; }
.yg-store__search .yg-i{
position:absolute; left:12px; top:50%; transform:translateY(-50%);
width:15px; height:15px; color:var(--yg-muted);
}
.yg-store__search input{
width:100%; height:40px;
border:1px solid var(--yg-border); border-radius:var(--yg-r-md);
background:#fff; color:var(--yg-text);
font-family:'Manrope',sans-serif; font-size:13.5px;
padding:0 14px 0 36px;
}
.yg-store__search input:focus{ outline:none; border-color:var(--yg-primary); box-shadow:var(--yg-ring); }
.yg-store__sortbar{ flex:0 0 auto; margin:0; }
.yg-store__main > .yg-count{ margin:0; }
.yg-store__offerlist{ min-width:0; }
.yg-store .re_filter_instore{ min-width:0; }
@media (max-width:600px){
.yg-store__sortbar{ width:100%; }
.yg-store__sortbar .yg-sort{ width:100%; justify-content:space-between; }
}
/* === REHub .rh_offer_list rows → modern compact horizontal cards ===
Real DOM: .rh_offer_list > .rh_grid_image_3_col > (.rh_gr_img_first
+ .rh_gr_top_middle + .rh_gr_middle_desc + .wp-block-group +
.rh_gr_btn_block). The inner div is the layout grid. */
.yg-store__offerlist .rh_offer_list{
position:relative;
padding:16px 18px; margin:0 0 12px;
background:var(--yg-card); border:1px solid var(--yg-border);
border-radius:var(--yg-r-md); box-shadow:var(--yg-sh-sm);
transition:border-color .14s ease, box-shadow .14s ease;
}
.yg-store__offerlist .rh_offer_list:hover{ border-color:var(--yg-primary); box-shadow:var(--yg-sh-md); }
.yg-store__offerlist .rh_offer_list:last-child{ margin-bottom:0; }
.yg-store__offerlist .rh_offer_list [class*="float"]{ float:none !important; }
.yg-store__offerlist .rh_offer_list .mb0,
.yg-store__offerlist .rh_offer_list .mb5,
.yg-store__offerlist .rh_offer_list .mb10,
.yg-store__offerlist .rh_offer_list .mb15{ margin-bottom:0 !important; }
.yg-store__offerlist .wp-block-group,
.yg-store__offerlist div.clearfix:empty{ display:none !important; }
.yg-store__offerlist .favorrightside,
.yg-store__offerlist .wishonimage{ display:none !important; }
.yg-store__offerlist .re_badge_for_grid,
.yg-store__offerlist .rh-ribbon{ display:none !important; }
/* Small diagonal corner ribbon on the offer image — REHub's OWN native
editorial-flag component, re-skinned, not rebuilt. REHub prints
`re_badge_create('ribbonleft')` (parent theme functions.php ~L1321) as
LABEL
— built from the real is_editor_choice + "Badge label" admin setting
(Latest offers / Best seller / Best price / …). Shows ONLY when a real
editor badge is set on that offer; no fallback text is invented.
Native mechanism, verified in rehub-theme/style.css (~L967-981): the
OUTER is a fixed-size overflow:hidden clip window pinned to a
corner with a slight negative inset so the flag reads as tucked INTO
the corner; the INNER is an oversized bar, rotated 45°/-45°
and anchored flush to one edge, so only its diagonal cross-section
shows through the window; ::before/::after add the small folded-edge
triangles at the bar's two visible ends. We reuse that exact
three-part structure and geometry ratio, just scaled down to fit our
112×84 (64×58 mobile) coupon-image frame and recoloured to the
YourGuruz marigold/indigo pair (native ships 4 stoplight tier colours
on white text; here every tier renders the same premium marigold so
ribbons stay visually consistent with every other accent badge on the
site — the !important beats REHub's own badge_2/3/4 colour rules).
The badge prints as a sibling of the image grid, not nested inside
.deal_img_wrap, so its native pixel offsets are recomposed against the
row's own padding box (16px/18px desktop, 12px/12px mobile) instead of
0/0 — same relationship, different containing block. */
.yg-store__offerlist .re-ribbon-badge{
position:absolute !important;
top:13px !important; left:14px !important; right:auto !important; bottom:auto !important;
width:54px !important; height:54px !important;
margin:0 !important; padding:0 !important;
overflow:hidden !important; text-align:left;
background:transparent !important; box-shadow:none !important; border-radius:0 !important;
z-index:2; pointer-events:none;
}
.yg-store__offerlist .re-ribbon-badge span{
position:absolute !important;
top:11px !important; left:auto !important; right:0 !important; bottom:auto !important;
width:68px !important; height:auto !important; min-width:0 !important;
transform:rotate(-45deg) !important; transform-origin:center !important;
display:block !important; text-align:center !important;
font-family:'Manrope',sans-serif !important;
font-size:7px !important; font-weight:800 !important; letter-spacing:.02em !important;
line-height:14px !important; text-transform:uppercase !important;
color:var(--yg-secondary) !important;
background:var(--yg-primary) !important;
margin:0 !important; padding:0 !important; border:0 !important;
box-shadow:0 2px 4px rgba(20,16,43,.3) !important;
white-space:nowrap !important; overflow:hidden !important; text-overflow:clip !important;
}
/* native folded-ribbon-end triangles (was #333, recoloured to our own
deep-indigo dark tone so the fold shadow still reads as "brand", not
a mismatched grey) */
.yg-store__offerlist .re-ribbon-badge span::before,
.yg-store__offerlist .re-ribbon-badge span::after{
content:"" !important; position:absolute !important; top:100% !important;
z-index:-1; border-style:solid !important; border-width:2px !important;
}
.yg-store__offerlist .re-ribbon-badge span::before{
left:0 !important; right:auto !important;
border-color:var(--yg-secondary) transparent transparent var(--yg-secondary) !important;
}
.yg-store__offerlist .re-ribbon-badge span::after{
right:0 !important; left:auto !important;
border-color:var(--yg-secondary) var(--yg-secondary) transparent transparent !important;
}
/* the layout grid: [media] [body/desc] [cta] */
.yg-store__offerlist .rh_grid_image_3_col{
display:grid;
grid-template-columns:112px minmax(0,1fr) auto;
grid-template-areas:"media body cta" "media desc cta" "media actions cta";
grid-template-rows:auto auto 1fr;
gap:4px clamp(16px,2vw,22px);
align-items:start;
width:100%;
}
.yg-store__offerlist .rh_gr_img_first{
grid-area:media; margin:0 !important; align-self:start;
width:112px; min-width:0; overflow:hidden;
}
.yg-store__offerlist .rh_gr_top_middle{ grid-area:body; min-width:0; overflow:hidden; }
.yg-store__offerlist .rh_gr_middle_desc{ grid-area:desc; min-width:0; }
.yg-store__offerlist .yg-ol-details{ grid-area:actions; align-self:start; }
.yg-store__offerlist .rh_gr_btn_block{ grid-area:cta; min-width:0; }
/* MEDIA — a fixed-height 4:3-ish frame. object-fit:contain keeps ANY
aspect (wide banner / square logo / portrait) undistorted; the frame
fills its column so wide images breathe instead of shrinking to a
sliver. Product-deal photos fill (cover). */
.yg-store__offerlist .deal_img_wrap{
position:relative;
width:112px !important; max-width:100%; height:84px !important; min-height:84px;
border:1px solid var(--yg-border) !important; border-radius:var(--yg-r-sm);
background:#fff; overflow:hidden; flex:0 0 auto;
}
/* Absolute-fill + object-fit, not flex + percentage max-height — REHub's
thumbnail ![]()
tags carry a hardcoded HTML `height` attribute (e.g.
height="92") that a flex-centered `max-height:100%` does not reliably
constrain against, letting the logo overflow its frame and sit
off-centre. Sizing the image to 100%/100% of the (position:relative,
fixed-size) frame via absolute positioning is not subject to that
quirk, so the logo is always fully contained, undistorted and
perfectly centred regardless of its own width/height attributes. */
.yg-store__offerlist .deal_img_wrap img{
position:absolute !important; inset:0 !important;
width:100% !important; height:100% !important;
max-width:100% !important; max-height:100% !important;
box-sizing:border-box !important;
object-fit:contain; object-position:center; display:block;
}
.yg-store__offerlist .saledealtype .deal_img_wrap img:not(.yg-ol-fallimg){
width:100% !important; height:100% !important; object-fit:cover; object-position:center;
}
/* store-logo fallback (no real offer image) — padded + de-boxed */
.yg-store__offerlist .yg-ol-fallimg{
padding:8px; mix-blend-mode:multiply;
max-width:100%; max-height:100%; object-fit:contain !important;
}
/* The generic "Coupon" / "Sale" / "Deal" type-label badge REHub used to
print on the image is retired in favour of the real editorial ribbon
above — the type itself still shows as text via the "Coupon code" /
date / Verified meta row next to the title (unchanged). */
.yg-store__offerlist .deal_string{ display:none !important; }
/* CENTRE — meta / title / price */
.yg-store__offerlist .woo_list_desc{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.yg-store__offerlist .woo_list_desc > *{ min-width:0; max-width:100%; }
.yg-store__offerlist .rh_price_wrapper,
.yg-store__offerlist .price_count{ min-width:0; max-width:100%; overflow:hidden; }
.yg-store__offerlist .woolist_meta{
display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px;
font-size:11px; color:var(--yg-muted); margin:0 !important;
}
.yg-store__offerlist .woolist_meta .yg-type{ margin:0; }
.yg-store__offerlist .verifymeta{ color:var(--yg-success) !important; font-weight:700; }
/* real expiry chip (only where rehub_offer_coupon_date exists) */
.yg-store__offerlist .yg-ol-exp{
display:inline-flex; align-items:center;
font-weight:700; color:var(--yg-primary-hover);
background:var(--yg-tint); border-radius:var(--yg-r-pill); padding:1px 7px;
}
.yg-store__offerlist .yg-ol-exp.is-expired{ color:var(--yg-muted); background:var(--yg-bg); }
/* headline (REHub H2, possibly rewritten to the real benefit by
yg_enrich_offer_list) — 2-line clamp so long benefits stay tidy */
.yg-store__offerlist h2{
font-family:'Manrope',sans-serif !important; font-weight:700 !important;
font-size:15.5px !important; line-height:1.4 !important; margin:0 !important;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.yg-store__offerlist h2 a{ color:var(--yg-secondary) !important; }
.yg-store__offerlist h2 a:hover{ color:var(--yg-primary-hover) !important; }
/* the benefit line that yg_enrich_offer_list folded into the H2 */
.yg-store__offerlist .yg-ol-benefit-dupe{ display:none !important; }
.yg-store__offerlist .rh_gr_middle_desc{
font-size:12.5px; line-height:1.55; color:var(--yg-muted);
margin:5px 0 0;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.yg-store__offerlist .rh_gr_middle_desc:empty{ display:none; }
/* "Show details" — a quiet inline link under the offer text */
.yg-store__offerlist .yg-ol-details{
align-self:flex-start;
background:none; border:0; padding:4px 0 0; margin:3px 0 0; cursor:pointer;
font-family:'Manrope',sans-serif; font-weight:700; font-size:12px;
color:var(--yg-primary-hover); text-align:left;
}
.yg-store__offerlist .yg-ol-details::after{ content:" ›"; }
.yg-store__offerlist .yg-ol-details:hover{ text-decoration:underline; }
.yg-store__offerlist .rh_gr_top_middle .priced_block,
.yg-store__offerlist .priced_block.floatleft{ margin:0 !important; padding:0 !important; }
.yg-store__offerlist .price_count{ display:inline-flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.yg-store__offerlist .coupontype .rh_regular_price{
font-family:'Manrope',sans-serif; font-weight:800; font-size:12.5px;
color:var(--yg-primary-hover); background:var(--yg-tint);
padding:4px 11px; border-radius:var(--yg-r-pill);
display:inline-block; max-width:100%;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
vertical-align:bottom;
}
.yg-store__offerlist .coupontype .price_count del{ display:none; }
.yg-store__offerlist .saledealtype .rh_regular_price{ font-weight:800; font-size:15px; color:var(--yg-secondary); }
.yg-store__offerlist .saledealtype .price_count del{ font-size:12px; color:var(--yg-muted); text-decoration:line-through; }
.yg-store__offerlist .rh-label-string{
display:inline-block !important; width:auto !important; max-width:100% !important;
float:none !important;
background:#E7F6EC !important; color:var(--yg-success) !important;
font-weight:800; font-size:10px; line-height:1.4; padding:2px 7px;
border-radius:var(--yg-r-pill); margin:0 !important; vertical-align:middle;
}
/* .woo_list_desc is a column flex — stop the price / discount pills
stretching to the full row width (they are direct flex items). */
.yg-store__offerlist .woo_list_desc > .rh-label-string,
.yg-store__offerlist .woo_list_desc > .rh_regular_price,
.yg-store__offerlist .woo_list_desc > .price_count,
.yg-store__offerlist .woo_list_desc > .priced_block{
align-self:flex-start; width:auto !important; max-width:100%;
}
.yg-store__offerlist .woo_list_desc > .priced_block{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px; }
/* RIGHT — CTA block (widened — closer to the older YourGuruz site's
fuller "Coupon Code" button, on the current card design) */
.yg-store__offerlist .rh_gr_btn_block{
align-self:center;
display:flex; flex-direction:column; align-items:stretch; gap:7px;
width:196px;
}
.yg-store__offerlist .rh_gr_btn_block .priced_block{ display:flex; flex-direction:column; gap:6px; margin:0 !important; }
/* CTA styling — needs `body` + .priced_block to out-specify the site-wide
marigold rule in style.css (body .priced_block .rehub_offer_coupon). */
body .yg-store__offerlist .priced_block .btn_offer_block,
body .yg-store__offerlist .btn_offer_block{
display:inline-flex; align-items:center; justify-content:center; gap:6px;
font-family:'Manrope',sans-serif !important; font-weight:700 !important; font-size:13.5px !important;
letter-spacing:.02em !important;
padding:14px 24px !important; border-radius:var(--yg-r-sm) !important;
text-decoration:none !important; white-space:nowrap; border:1px solid transparent !important;
transition:background .14s ease;
}
/* COUPON → indigo "Get code" action */
body .yg-store__offerlist .coupontype .priced_block .btn_offer_block,
body .yg-store__offerlist .coupontype .btn_offer_block{
background:var(--yg-secondary) !important; color:#fff !important; border-color:var(--yg-secondary) !important;
}
body .yg-store__offerlist .coupontype .btn_offer_block:hover{ background:#241d47 !important; }
/* PRODUCT DEAL → marigold "Shop deal" action */
body .yg-store__offerlist .saledealtype .priced_block .btn_offer_block,
body .yg-store__offerlist .saledealtype .btn_offer_block{
background:var(--yg-primary) !important; color:var(--yg-secondary) !important; border-color:var(--yg-primary-hover) !important;
}
body .yg-store__offerlist .saledealtype .btn_offer_block:hover{ background:var(--yg-primary-hover) !important; }
/* the revealed coupon code → dashed tint chip (NOT a solid button) */
body .yg-store__offerlist .priced_block .rehub_offer_coupon,
body .yg-store__offerlist .rehub_offer_coupon{
display:flex !important; align-items:center; justify-content:center; gap:6px;
font-family:'Manrope',ui-monospace,monospace !important; font-weight:800 !important; font-size:12.5px !important;
letter-spacing:.04em;
color:var(--yg-secondary) !important; background:var(--yg-tint) !important;
border:1px dashed var(--yg-primary) !important; border-radius:var(--yg-r-sm) !important;
padding:11px 18px !important; margin:0 !important; cursor:pointer; max-width:100%;
}
body .yg-store__offerlist .priced_block .rehub_offer_coupon:hover,
body .yg-store__offerlist .rehub_offer_coupon:hover{ background:#FFE6CF !important; }
.yg-store__offerlist .rehub_offer_coupon .coupon_text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.yg-store__offerlist .rehub_offer_coupon i,
.yg-store__offerlist .rehub_offer_coupon .rhicon{ display:none !important; }
.yg-store__offerlist .saledealtype .rehub_offer_coupon{ display:none !important; }
@media (max-width:600px){
.yg-store__offerlist .rh_offer_list{ padding:12px; }
.yg-store__offerlist .rh_grid_image_3_col{
grid-template-columns:64px minmax(0,1fr);
grid-template-areas:"media body" "media desc" "actions actions" "cta cta";
grid-template-rows:auto auto auto auto;
gap:4px 11px;
}
.yg-store__offerlist .rh_gr_img_first{ width:64px; }
.yg-store__offerlist .rh_gr_img_first .deal_img_wrap{ width:64px !important; height:58px; }
/* same native REHub ribbon geometry, scaled down further to match the
smaller mobile image (64×58) + tighter row padding (12px) */
.yg-store__offerlist .re-ribbon-badge{ top:10px !important; left:10px !important; width:30px !important; height:30px !important; }
.yg-store__offerlist .re-ribbon-badge span{
top:6px !important; width:38px !important;
font-size:5px !important; line-height:10px !important; letter-spacing:.01em !important;
}
.yg-store__offerlist .re-ribbon-badge span::before,
.yg-store__offerlist .re-ribbon-badge span::after{ border-width:1px !important; }
.yg-store__offerlist .rh_gr_btn_block{
width:100%; align-self:stretch; margin-top:8px;
flex-direction:row; flex-wrap:wrap; align-items:center;
justify-content:center; /* the row's OTHER flex child (.rh_button_wrapper,
a plain fallback REHub prints alongside the real reveal button) is
confirmed to always render 0x0 — invisible, contributing nothing to
this row's layout — so in practice only ONE item (the coupon button)
ever occupies this row. With the default justify-content:normal
(= flex-start) that left the button pinned to the left edge with a
large, unbalanced empty gap on the right. Centering the row is the
correct, mechanism-agnostic fix regardless of which single child is
actually present. */
}
.yg-store__offerlist .rh_gr_btn_block .priced_block{
flex-direction:row; flex-wrap:wrap; width:100%; align-items:center; justify-content:center; /* same centering, one flex level in */
gap:0; /* desktop's gap:6px (set above, outside this media query) still
applied here since this rule only overrides flex-direction/width/
align-items — with justify-content:center that stray 6px gap was
being counted between the (zero-width) fallback link and the real
button, centering the wrong combined box and skewing the button a
few px off-centre. Zeroed on mobile only; desktop is untouched. */
}
/* REHub prints a second, always-invisible (0×0) fallback link
alongside the real button (.rh_button_wrapper > a.btn_offer_block —
see the note above). It shares the .btn_offer_block class with the
real button, so it was still being counted as a competing flex item
when sizing the row — confirmed live: widening the real button
alone had no effect until this fallback was also taken out of flex
distribution. Neutralized here so it can never affect sizing again. */
.yg-store__offerlist .rh_button_wrapper .btn_offer_block{ flex:none !important; width:0 !important; margin:0 !important; padding:0 !important; }
.yg-store__offerlist .rehub_offer_coupon{
flex:none; width:288px;
/* was flex:1 1 62% (rendered ~144px, confirmed live) — this class
alone (not .btn_offer_block) reliably targets the real button in
BOTH states: masked ("Coupon Code") and, after reveal, REHub's own
JS drops the .btn_offer_block/.masked_coupon classes but keeps
.rehub_offer_coupon, so the wider size stays consistent through
the reveal, no resize/jump on click. A fixed px value, not a
percentage: percentage width on this element was tested live and
resolved incorrectly (against an intermediate wrapper, not the
visible row) even with the flex fixes above — 288px is exactly
2× the original ~144px rendered width, confirmed centred (15px
equal margin either side at 390px) once paired with the two
fixes above. Height is untouched — only width/flex changed here,
nothing in the padding/font-size rule below that sets height. */
}
/* Mobile-only CTA colour + size refinement (desktop is untouched — this
entire rule lives inside this same max-width:600px block). The masked
"Coupon Code" button inherits `.btn_offer_block`'s desktop styling
(solid var(--yg-secondary), a very dark indigo that reads as near-
black) via the site-wide, non-mobile-scoped rule above. Re-skinned
here to this exact same design system's OWN marigold pairing already
used one section down for `saledealtype` cards' "Shop deal" button
(var(--yg-primary) bg + var(--yg-secondary) text + var(--yg-primary-
hover) border/hover) — not a new colour, reusing an already-proven
one for consistency. Slightly larger padding/font for a more
comfortable tap target, still well short of "oversized". */
body .yg-store__offerlist .coupontype .priced_block .btn_offer_block,
body .yg-store__offerlist .coupontype .btn_offer_block{
background:var(--yg-primary) !important; color:var(--yg-secondary) !important; border-color:var(--yg-primary-hover) !important;
padding:13px 20px !important; font-size:13.5px !important;
}
body .yg-store__offerlist .coupontype .btn_offer_block:hover{ background:var(--yg-primary-hover) !important; }
}
/* empty state — a real store with no offers listed yet */
.yg-store__empty{
display:flex; flex-direction:column; align-items:center; text-align:center;
gap:6px; padding:clamp(28px,5vw,46px) 20px;
border:1px dashed var(--yg-border); border-radius:var(--yg-r-md);
background:var(--yg-card);
}
.yg-store__empty-ic{ width:26px; height:26px; color:var(--yg-primary); margin-bottom:4px; }
.yg-store__empty p{ margin:0; font-family:'Manrope',sans-serif; font-weight:800; font-size:15px; color:var(--yg-secondary); }
.yg-store__empty span{ font-size:13px; color:var(--yg-muted); max-width:44ch; }
/* About {store} — long-form brand copy, clamped */
.yg-store__about .yg-prose{
font-family:'Manrope', sans-serif;
color:var(--yg-text); font-size:14.5px; line-height:1.75;
max-width:820px;
}
.yg-store__about .yg-prose.is-clamped{
display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden;
}
.yg-store__about .yg-prose h2{ font-family:'Fraunces', serif; color:var(--yg-secondary); font-size:18px; margin:20px 0 8px; }
.yg-store__about .yg-prose h3{ font-size:15px; color:var(--yg-secondary); margin:16px 0 6px; }
.yg-store__about .yg-prose p{ margin:0 0 10px; }
.yg-store__about .yg-prose ul,
.yg-store__about .yg-prose ol{ padding-left:20px; margin:0 0 10px; }
.yg-store__about .yg-prose table{ width:100%; border-collapse:collapse; font-size:13px; margin:12px 0; display:block; overflow-x:auto; }
.yg-store__about .yg-prose td,
.yg-store__about .yg-prose th{ border:1px solid var(--yg-border); padding:8px 10px; text-align:left; }
.yg-store__about{ border-top:1px solid var(--yg-border); padding-top:clamp(16px,2.5vw,24px); margin-top:6px; }
.yg-store__about .yg-section-head{ margin-bottom:10px; }
.yg-store__about > .yg-linkbtn{ margin-top:10px; }
/* ---------- 19. CATEGORY PAGE (category.php child template) ----------
Reuses: §5 hero, §13 .yg-results (store-facet sidebar + main),
.yg-filters, .yg-toolbar, .yg-chiprow, .re_filter_panel pills, §14
pagination, §16 coupon-reveal modal, §18 .yg-store__offerlist (the
compact horizontal offer list — category.php puts that class on its
listing container) + .yg-store__about prose. Only glue here. */
.yg-category{ display:flex; flex-direction:column; gap:clamp(18px, 3vw, 32px); }
.yg-category > .yg-hero-card{ margin:16px 0 0; }
.yg-hero-ic{ width:38px; height:38px; color:var(--yg-primary); }
.yg-category__siblings{ margin:0; }
.yg-category__results{ margin:0; }
.yg-results__main{ min-width:0; }
.yg-results__main .yg-toolbar{ margin-bottom:12px; }
.yg-results__main .yg-toolbar__row:empty{ display:none; }
.yg-category__bar{
display:flex; align-items:center; justify-content:space-between;
flex-wrap:wrap; gap:8px 16px; margin:0 0 12px;
}
.yg-category__bar .yg-count{ margin:0; }
.yg-category__sortbar{ margin:0; flex:0 0 auto; }
.yg-category__grid.re_filter_instore{ min-width:0; }
/* store filter = links (server-side ?yg_store=), reusing .yg-fopt row */
.yg-category__filters .yg-fopt{ text-decoration:none; color:var(--yg-text); }
.yg-category__filters .yg-fopt.is-active{ background:var(--yg-tint); color:var(--yg-primary-hover); }
.yg-category__filters .yg-fopt.is-active .yg-fopt__c{ color:var(--yg-primary-hover); }
.yg-category__stores{ gap:1px; }
.yg-filters__empty{ font-size:12.5px; color:var(--yg-muted); margin:4px 0 0; line-height:1.6; }
/* REHub author avatar + wishlist heart + empty blocks inside category cards */
body.category .vendor_for_grid,
body.category .favorrightside,
body.category .wishonimage,
body.category .col_item .wp-block-group:empty,
body.category .col_item .cpn_store_link{ display:none !important; }
.yg-category__about{ border-top:1px solid var(--yg-border); padding-top:clamp(18px, 3vw, 30px); }
@media (max-width:620px){
.yg-category__bar{ gap:8px; }
.yg-category__sortbar{ width:100%; }
.yg-category__sortbar .yg-sort{ width:100%; justify-content:space-between; }
}
/* ---------- 19b. TODAY'S DEALS — discovery sections ----------
Hero → Featured today → full filterable feed → Deals by category.
All rows reuse §18 .yg-store__offerlist, so Coupon vs Product Deal
presentation is identical everywhere. */
.yg-deals-page.yg-category{ gap:clamp(22px, 3.4vw, 40px); }
.yg-deals__section{ min-width:0; }
.yg-deals__section > .yg-section-head{ margin-bottom:clamp(10px, 1.6vw, 16px); }
/* Featured strip — a tinted panel so it reads as a highlight, not the feed */
.yg-deals__featured{
background:var(--yg-bg);
border:1px solid var(--yg-border);
border-radius:var(--yg-r-lg);
padding:clamp(14px, 2vw, 22px);
}
.yg-deals__featured .yg-store__offerlist .rh_offer_list{ background:#fff; }
.yg-deals__featured .yg-store__offerlist .rh_offer_list:last-child{ margin-bottom:0; }
/* Deals by category — one scoped mini-list per top category */
.yg-deals__bycat .yg-deals__catblock{ margin-top:clamp(16px, 2.4vw, 26px); }
.yg-deals__bycat .yg-deals__catblock:first-of-type{ margin-top:0; }
.yg-deals__cathead{
display:flex; align-items:baseline; justify-content:space-between;
gap:10px 16px; flex-wrap:wrap; margin:0 0 10px;
}
.yg-deals__cathead h3{
font-family:'Fraunces', Georgia, serif; font-weight:700;
color:var(--yg-secondary); margin:0;
font-size:clamp(15px, 1.2vw+8px, 19px); line-height:1.2;
}
.yg-deals__cathead .yg-linkbtn{ font-size:12.5px; white-space:nowrap; }
.yg-deals__cat-list .rh_offer_list:last-child{ margin-bottom:0; }
/* ---------- 21. BLOG — archive + single article ----------
archive-blog.php / single-blog.php (child templates). Real `blog`
query; layout + typography only. */
.yg-blog{ display:flex; flex-direction:column; gap:clamp(20px, 3vw, 32px); }
.yg-blog__bar{
display:flex; align-items:center; justify-content:space-between;
gap:12px 20px; flex-wrap:wrap;
}
.yg-blog__cats{ margin:0; }
.yg-blog__search{ position:relative; flex:0 1 260px; min-width:0; }
.yg-blog__search .yg-i{
position:absolute; left:12px; top:50%; transform:translateY(-50%);
width:15px; height:15px; color:var(--yg-muted);
}
.yg-blog__search input{
width:100%; height:40px; border:1px solid var(--yg-border);
border-radius:var(--yg-r-md); background:#fff; color:var(--yg-text);
font-family:'Manrope',sans-serif; font-size:13.5px; padding:0 14px 0 34px;
}
.yg-blog__search input:focus{ outline:none; border-color:var(--yg-primary); box-shadow:var(--yg-ring); }
.yg-blog__grid{ display:grid; grid-template-columns:1fr; gap:clamp(16px, 2.4vw, 26px); }
@media (min-width:640px){ .yg-blog__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1000px){ .yg-blog__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.yg-bcard{
display:flex; flex-direction:column; min-width:0;
background:var(--yg-card); border:1px solid var(--yg-border);
border-radius:var(--yg-r-lg); overflow:hidden; box-shadow:var(--yg-sh-sm);
transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.yg-bcard:hover{ border-color:var(--yg-primary); box-shadow:var(--yg-sh-md); transform:translateY(-2px); }
.yg-bcard__media{ display:block; aspect-ratio:16 / 9; background:var(--yg-bg); overflow:hidden; }
.yg-bcard__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.yg-bcard__ph{
width:100%; height:100%; display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg, var(--yg-tint) 0%, #EEE9FB 60%, #E7ECFF 100%);
color:var(--yg-primary);
}
.yg-bcard__ph .yg-i{ width:40px; height:40px; opacity:.55; }
.yg-bcard__body{ padding:clamp(12px, 1.6vw, 16px); display:flex; flex-direction:column; gap:8px; flex:1; }
.yg-bcard__meta{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--yg-muted); flex-wrap:wrap; }
.yg-bcard__cat{ font-weight:800; color:var(--yg-primary-hover); text-transform:uppercase; letter-spacing:.03em; font-size:10.5px; }
.yg-bcard__dot{ color:var(--yg-border); }
.yg-bcard__title{
font-family:'Fraunces',Georgia,serif; font-weight:700; color:var(--yg-secondary);
font-size:clamp(15px, 1vw+10px, 17px); line-height:1.3; margin:0;
}
.yg-bcard__title a{ color:inherit; }
.yg-bcard__title a:hover{ color:var(--yg-primary-hover); }
.yg-bcard__excerpt{
font-size:13px; line-height:1.6; color:var(--yg-muted); margin:0;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.yg-bcard__cta{ align-self:flex-start; margin-top:4px; }
@media (min-width:1000px){
.yg-blog__grid.has-lead .yg-bcard--lead{ grid-column:1 / -1; flex-direction:row; }
.yg-blog__grid.has-lead .yg-bcard--lead .yg-bcard__media{ flex:0 0 54%; aspect-ratio:16 / 10; }
.yg-blog__grid.has-lead .yg-bcard--lead .yg-bcard__body{ justify-content:center; padding:clamp(20px, 3vw, 36px); gap:12px; }
.yg-blog__grid.has-lead .yg-bcard--lead .yg-bcard__title{ font-size:clamp(22px, 1.6vw+12px, 30px); }
.yg-blog__grid.has-lead .yg-bcard--lead .yg-bcard__excerpt{ -webkit-line-clamp:3; font-size:14.5px; }
}
.yg-pagination{ display:flex; justify-content:center; margin-top:clamp(8px, 2vw, 16px); }
.yg-pagination ul{ display:flex; gap:6px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.yg-pagination a, .yg-pagination span{
display:inline-flex; align-items:center; justify-content:center;
min-width:38px; height:38px; padding:0 10px;
border:1px solid var(--yg-border); border-radius:var(--yg-r-md);
font-family:'Manrope',sans-serif; font-size:13px; font-weight:700;
color:var(--yg-text); background:#fff; text-decoration:none;
}
.yg-pagination a:hover{ border-color:var(--yg-primary); color:var(--yg-primary-hover); }
.yg-pagination .current{ background:var(--yg-secondary); color:#fff; border-color:var(--yg-secondary); }
.yg-blog__empty{ text-align:center; color:var(--yg-muted); padding:40px 0; }
/* ----- single article ----- */
.yg-article{ display:block; }
.yg-article__head{ max-width:760px; margin:0 auto clamp(16px, 2.5vw, 24px); text-align:center; }
.yg-article__eyebrow{
display:flex; align-items:center; justify-content:center; gap:8px;
font-size:12px; color:var(--yg-muted); flex-wrap:wrap;
}
.yg-article__cat{ font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:11px; color:var(--yg-primary-hover); }
.yg-article__dot{ color:var(--yg-border); }
.yg-article__title{
font-family:'Fraunces',Georgia,serif; font-weight:700; color:var(--yg-secondary);
line-height:1.15; font-size:clamp(26px, 2.4vw+14px, 42px); margin:10px 0 14px;
}
.yg-article__byline{ display:inline-flex; align-items:center; gap:9px; font-size:13.5px; color:var(--yg-text); font-weight:600; }
.yg-article__avatar{ border-radius:50%; }
.yg-article__hero{
margin:0 0 clamp(20px, 3vw, 32px); border-radius:var(--yg-r-lg);
overflow:hidden; border:1px solid var(--yg-border);
}
.yg-article__hero img{ width:100%; height:auto; display:block; max-height:520px; object-fit:cover; }
.yg-article__grid{ display:grid; grid-template-columns:1fr; gap:clamp(20px, 3vw, 44px); align-items:start; }
@media (min-width:1000px){
.yg-article__grid{ grid-template-columns:minmax(0,1fr) 244px; }
.yg-article__main{ order:1; margin-inline:0; }
.yg-article__aside{ order:2; }
.yg-article__asidewrap{ position:sticky; top:24px; }
}
.yg-article__main{ min-width:0; max-width:720px; margin-inline:auto; }
.yg-article__aside{ min-width:0; }
.yg-toc{ border:1px solid var(--yg-border); border-radius:var(--yg-r-md); padding:12px 14px; background:var(--yg-card); }
.yg-toc__h{
font-family:'Manrope',sans-serif; font-weight:800; font-size:11px;
letter-spacing:.06em; text-transform:uppercase; color:var(--yg-muted);
margin:0 0 8px; list-style:none; cursor:pointer;
display:flex; align-items:center; justify-content:space-between;
}
.yg-toc__h::-webkit-details-marker{ display:none; }
.yg-toc__h::after{
content:""; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
transform:rotate(45deg); transition:transform .15s ease; margin-right:2px;
}
.yg-toc[open] .yg-toc__h::after{ transform:rotate(-135deg); }
.yg-toc ol{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:2px; }
@media (min-width:1000px){
.yg-toc__h{ cursor:default; margin-bottom:2px; }
.yg-toc__h::after{ display:none; }
}
@media (max-width:999px){
.yg-toc ol{ max-height:44vh; overflow-y:auto; overscroll-behavior:contain; }
}
.yg-toc a{
display:block; padding:5px 8px; border-radius:6px; font-size:12.5px; line-height:1.4;
color:var(--yg-muted); text-decoration:none; border-left:2px solid transparent;
}
.yg-toc a:hover{ color:var(--yg-secondary); background:var(--yg-bg); }
.yg-toc a.is-current{ color:var(--yg-primary-hover); border-left-color:var(--yg-primary); background:var(--yg-tint); font-weight:700; }
.yg-toc__h3 a{ padding-left:18px; font-size:12px; }
.yg-article__body{ font-family:'Manrope',sans-serif; color:var(--yg-text); font-size:16px; line-height:1.75; }
.yg-article__body > *{ margin:0 0 1.15em; }
.yg-article__body > *:last-child{ margin-bottom:0; }
.yg-article__body h2,
.yg-article__body h3,
.yg-article__body h4{
font-family:'Fraunces',Georgia,serif; font-weight:700; color:var(--yg-secondary) !important;
background:transparent !important; border:0 !important; box-shadow:none !important;
padding:0 !important; text-align:left !important;
scroll-margin-top:88px;
}
.yg-article__body h2{ font-size:clamp(20px, 1.4vw+12px, 26px); line-height:1.3; margin:1.8em 0 .55em; }
.yg-article__body h3{ font-size:clamp(17px, 1vw+11px, 20px); margin:1.5em 0 .45em; }
.yg-article__body h4{ font-size:16px; margin:1.3em 0 .4em; }
/* REHub / editor "styled heading" wrappers inside the content */
.yg-article__body .re-block-title,
.yg-article__body .wp-block-heading.has-background{ background:transparent !important; padding:0 !important; }
.yg-article__body a{ color:var(--yg-primary-hover); text-decoration:underline; text-underline-offset:2px; }
.yg-article__body img{ height:auto; border-radius:var(--yg-r-md); }
.yg-article__body figure{ margin:1.6em 0; }
.yg-article__body figcaption{ font-size:12.5px; color:var(--yg-muted); text-align:center; margin-top:6px; }
.yg-article__body ul, .yg-article__body ol{ padding-left:1.4em; }
.yg-article__body li{ margin:.4em 0; }
.yg-article__body blockquote{ margin:1.6em 0; padding:2px 0 2px 18px; border-left:3px solid var(--yg-primary); color:var(--yg-muted); font-style:italic; }
.yg-article__body table{ width:100%; border-collapse:collapse; font-size:14px; display:block; overflow-x:auto; }
.yg-article__body th, .yg-article__body td{ border:1px solid var(--yg-border); padding:9px 12px; text-align:left; }
.yg-article__body th{ background:var(--yg-bg); font-weight:800; }
.yg-article__body iframe{ max-width:100%; }
.yg-article__tags{ display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 0; }
.yg-article__tags a{
font-size:12px; color:var(--yg-muted); background:var(--yg-bg);
border:1px solid var(--yg-border); border-radius:var(--yg-r-pill);
padding:4px 10px; text-decoration:none;
}
.yg-article__tags a:hover{ color:var(--yg-primary-hover); border-color:var(--yg-primary); }
.yg-share{
display:flex; align-items:center; gap:8px; flex-wrap:wrap;
margin:24px 0 0; padding:16px 0 0; border-top:1px solid var(--yg-border);
}
.yg-share__label{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--yg-muted); margin-right:2px; }
.yg-share__btn{
display:inline-flex; align-items:center; justify-content:center; gap:6px;
width:38px; height:38px; border:1px solid var(--yg-border); border-radius:50%;
color:var(--yg-secondary); background:#fff; cursor:pointer; text-decoration:none;
}
.yg-share__btn:hover{ border-color:var(--yg-primary); color:var(--yg-primary-hover); }
.yg-share__copy{ width:auto; padding:0 12px; border-radius:var(--yg-r-pill); }
.yg-share__done{ display:none; font-size:12px; font-weight:700; }
.yg-share__copy.is-done{ border-color:var(--yg-success); color:var(--yg-success); }
.yg-share__copy.is-done .yg-i{ display:none; }
.yg-share__copy.is-done .yg-share__done{ display:inline; }
.yg-article__related{ margin-top:clamp(28px, 4vw, 48px); border-top:1px solid var(--yg-border); padding-top:clamp(20px, 3vw, 32px); }
.yg-article__comments{ margin-top:clamp(28px, 4vw, 44px); border-top:1px solid var(--yg-border); padding-top:clamp(20px, 3vw, 32px); max-width:760px; }
@media (max-width:640px){
.yg-blog__bar{ gap:10px; }
.yg-blog__search{ flex:1 1 100%; }
}
/* ---------- 22. SITE FOOTER (child footer.php → yg_footer()) ----------
One original composition: brand anchor + four discovery/company rails
+ a thin legal / affiliate / back-to-top bar. Deep Indigo ground with
a colour rule + soft glow echoing the new YG mark. Mobile turns the
rails into tap accordions. */
.yg-footer{
background:var(--yg-secondary);
color:rgba(255,255,255,.72);
font-family:'Manrope', sans-serif;
margin-top:clamp(40px, 6vw, 80px);
}
.yg-footer::before{
content:""; display:block; height:3px;
background:linear-gradient(90deg, transparent 0%, #4585FF 24%, #7E6BF2 44%, #FF7A1A 66%, transparent 100%);
opacity:.7;
}
.yg-footer a{ color:inherit; text-decoration:none; }
.yg-footer h2, .yg-footer h3, .yg-footer h4{ color:inherit; font-family:'Manrope', sans-serif; }
.yg-footer__inner{
position:relative;
display:grid; grid-template-columns:1fr;
gap:clamp(28px, 4vw, 40px);
padding-block:clamp(34px, 5vw, 56px);
}
.yg-footer__inner::before{
content:""; position:absolute; left:-8%; top:-30%;
width:min(460px, 60%); height:460px; pointer-events:none;
background:radial-gradient(circle at 30% 30%, rgba(126,107,242,.14), transparent 70%);
}
@media (min-width:1000px){
.yg-footer__inner{ grid-template-columns:minmax(0, 300px) minmax(0, 1fr); gap:clamp(36px, 6vw, 88px); align-items:start; }
}
/* ---- brand anchor ---- */
.yg-footer__brand{ position:relative; min-width:0; display:flex; flex-direction:column; gap:16px; }
.yg-footer__logo{ line-height:0; }
.yg-footer__logo img{ height:28px; width:auto; display:block; }
.yg-footer__blurb{
margin:0; max-width:340px;
font-size:13.5px; line-height:1.7; color:rgba(255,255,255,.58);
}
.yg-footer__trust{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.yg-footer__trust li{
display:inline-flex; align-items:center; gap:6px;
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
border-radius:var(--yg-r-pill); padding:5px 11px;
font-size:11px; font-weight:800; letter-spacing:.02em; color:rgba(255,255,255,.82);
}
.yg-footer__trust .yg-i{ width:13px; height:13px; color:var(--yg-primary); }
.yg-footer__social{ list-style:none; margin:2px 0 0; padding:0; display:flex; gap:8px; }
.yg-footer__social a{
display:flex; align-items:center; justify-content:center;
width:34px; height:34px; border-radius:50%;
background:rgba(255,255,255,.07); color:rgba(255,255,255,.7);
transition:background .14s ease, color .14s ease, transform .14s ease;
}
.yg-footer__social a:hover{ background:var(--yg-primary); color:var(--yg-secondary); transform:translateY(-2px); }
/* ---- discovery / company rails ---- */
.yg-footer__nav{
position:relative; min-width:0;
display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px 28px;
}
@media (min-width:760px){ .yg-footer__nav{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(18px,2.6vw,36px); } }
.yg-footer__col{ min-width:0; }
.yg-footer__col > summary{ list-style:none; cursor:default; display:block; }
.yg-footer__col > summary::-webkit-details-marker{ display:none; }
.yg-footer__col h3{
margin:0 0 13px;
font-family:'Manrope', sans-serif; font-weight:800;
font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
color:rgba(255,255,255,.46) !important;
}
.yg-footer__col > ul{ list-style:none; margin:0; padding:0; display:flex !important; flex-direction:column; gap:9px; }
.yg-footer__col a{
font-size:13.5px; color:rgba(255,255,255,.72);
transition:color .12s ease, transform .12s ease;
display:inline-block;
}
.yg-footer__col a:hover{ color:#fff; transform:translateX(2px); }
.yg-footer__more{ margin-top:3px; }
.yg-footer__more a{ font-weight:800; color:var(--yg-primary); display:inline-flex; align-items:center; gap:5px; }
.yg-footer__more a:hover{ color:#fff; }
.yg-footer__more .yg-i{ width:13px; height:13px; }
/* ---- bottom legal bar ---- */
.yg-footer__bottom{
border-top:1px solid rgba(255,255,255,.08);
background:rgba(0,0,0,.16);
}
.yg-footer__bottominner{
display:flex; align-items:center; justify-content:space-between;
flex-wrap:wrap; gap:10px 24px; padding-block:15px 17px;
}
.yg-footer__legal{
margin:0; font-size:11.5px; line-height:1.6; color:rgba(255,255,255,.46);
display:flex; flex-wrap:wrap; gap:2px 12px; align-items:baseline;
}
.yg-footer__legal a{ color:rgba(255,255,255,.7); text-decoration:underline; text-underline-offset:2px; }
.yg-footer__legal a:hover{ color:#fff; }
.yg-footer__aff{ max-width:520px; }
.yg-footer__legallinks{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; }
.yg-footer__legallinks a{ font-size:11.5px; color:rgba(255,255,255,.62); }
.yg-footer__legallinks a:hover{ color:#fff; }
.yg-footer__totop{
display:inline-flex; align-items:center; gap:6px;
font-size:11.5px; font-weight:800; letter-spacing:.02em; color:rgba(255,255,255,.72);
border:1px solid rgba(255,255,255,.14); border-radius:var(--yg-r-pill);
padding:7px 14px; transition:border-color .14s ease, color .14s ease;
}
.yg-footer__totop:hover{ border-color:var(--yg-primary); color:#fff; }
.yg-footer__totop .yg-i{ width:13px; height:13px; transform:rotate(-90deg); }
/* ---- mobile: rails become tap accordions ---- */
@media (max-width:759px){
.yg-footer__nav{ display:block; }
.yg-footer__col{ border-top:1px solid rgba(255,255,255,.08); }
.yg-footer__col > summary{
cursor:pointer; display:flex; align-items:center; justify-content:space-between;
padding:15px 2px; gap:12px;
}
.yg-footer__col h3{ margin:0; font-size:12px; color:rgba(255,255,255,.9); }
.yg-footer__col > summary::after{
content:""; width:8px; height:8px; flex:0 0 auto;
border-right:2px solid rgba(255,255,255,.5); border-bottom:2px solid rgba(255,255,255,.5);
transform:rotate(45deg); transition:transform .16s ease;
}
.yg-footer__col[open] > summary::after{ transform:rotate(-135deg); }
.yg-footer__col > ul{ padding:2px 2px 16px; gap:13px; }
.yg-footer__col a{ font-size:14px; }
.yg-footer__brand{ align-items:flex-start; text-align:left; }
.yg-footer__bottominner{ flex-direction:column; align-items:center; text-align:center; gap:14px; padding-block:20px; }
.yg-footer__legal{ justify-content:center; }
.yg-footer__legallinks{ justify-content:center; }
.yg-footer__totop{ width:100%; max-width:280px; justify-content:center; padding:11px 14px; }
}
/* ---------- 23. ABOUT US (page-about-us.php) ---------- */
.yg-about-hero{
position:relative; overflow:hidden; isolation:isolate;
background:var(--yg-secondary); color:#fff;
min-height:clamp(300px, 40vw, 420px);
display:flex; align-items:center;
}
.yg-about-hero__art{
position:absolute; top:0; right:0; bottom:0; left:auto;
height:100%; width:auto; max-width:none;
object-fit:cover; object-position:right center;
z-index:-2; pointer-events:none; user-select:none;
}
/* left-to-right legibility scrim over the artwork */
.yg-about-hero::before{
content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(90deg,
var(--yg-secondary) 0%,
rgba(20,16,43,.92) 38%,
rgba(20,16,43,.35) 66%,
rgba(20,16,43,0) 100%);
}
.yg-about-hero__inner{
position:relative; z-index:1;
width:100%;
padding-block:clamp(40px, 6vw, 68px);
}
.yg-about-hero__eyebrow{
display:inline-block; margin-bottom:12px;
font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
color:var(--yg-primary);
}
.yg-about-hero__title{
font-family:'Fraunces', serif;
font-size:clamp(28px, 3vw + 15px, 52px);
line-height:1.08; letter-spacing:-.01em;
margin:0; max-width:16ch; color:#fff !important;
}
.yg-about-hero__sub{
margin:16px 0 0; max-width:52ch;
font-size:clamp(15px, .7vw + 12px, 18px); line-height:1.62;
color:rgba(255,255,255,.78);
}
.yg-about-hero__chips{
display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:20px;
}
.yg-about-hero__chips span{
display:inline-flex; align-items:center; gap:6px;
padding:6px 12px; border-radius:var(--yg-r-pill);
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
font-size:12px; font-weight:700; color:rgba(255,255,255,.9);
}
.yg-about-hero__chips .yg-i{ width:14px; height:14px; color:var(--yg-primary); }
.yg-about{
padding-block:clamp(40px, 6vw, 76px);
display:flex; flex-direction:column; gap:clamp(44px, 7vw, 88px);
}
.yg-about__lead{ max-width:640px; margin-bottom:clamp(18px, 3vw, 30px); }
.yg-about__kicker{
display:inline-block; margin-bottom:10px;
font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
color:var(--yg-primary);
}
.yg-about__lead h2{
font-family:'Fraunces', serif;
font-size:clamp(22px, 1.6vw + 12px, 34px); line-height:1.16; letter-spacing:-.01em;
margin:0; color:var(--yg-secondary);
}
.yg-about__lead p{
margin:12px 0 0; color:var(--yg-muted);
font-size:clamp(15px, .5vw + 12px, 17px); line-height:1.62;
}
/* --- story: lead beside prose on desktop --- */
.yg-about__story{ display:grid; gap:clamp(14px, 2.5vw, 44px); }
.yg-about__story .yg-about__lead{ margin-bottom:0; }
.yg-about__prose{ max-width:70ch; }
.yg-about__prose p{
margin:0 0 16px; font-size:clamp(15px, .5vw + 12px, 17px); line-height:1.78; color:#3a3552;
}
.yg-about__prose p:first-child{
font-size:clamp(16px, .6vw + 13px, 19px); color:var(--yg-secondary);
}
.yg-about__prose p:last-child{ margin-bottom:0; }
@media (min-width:900px){
.yg-about__story{ grid-template-columns:minmax(0,300px) minmax(0,1fr); align-items:start; }
}
.yg-about__since{
margin:18px 0 0; padding-left:13px; position:relative;
font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
color:var(--yg-muted); line-height:1.5;
}
.yg-about__since::before{
content:""; position:absolute; left:0; top:2px; bottom:2px; width:3px;
border-radius:2px; background:var(--yg-primary);
}
.yg-about__since span{ display:block; color:var(--yg-secondary); font-weight:800; letter-spacing:.02em; }
/* --- value / trust cards --- */
.yg-about__cards{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:600px){ .yg-about__cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .yg-about__cards{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1000px){ .yg-about__cards--trust{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.yg-about__card{
background:var(--yg-card); border:1px solid var(--yg-border);
border-radius:var(--yg-r-lg); padding:22px 20px; box-shadow:var(--yg-sh-sm);
}
.yg-about__cardic{
display:inline-flex; align-items:center; justify-content:center;
width:42px; height:42px; margin-bottom:14px;
border-radius:12px; background:var(--yg-tint); color:var(--yg-primary);
}
.yg-about__cardic .yg-i{ width:20px; height:20px; }
.yg-about__card h3{
font-family:'Manrope', sans-serif !important; font-size:15.5px; font-weight:800;
color:var(--yg-secondary) !important; margin:0 0 7px;
}
.yg-about__card p{ margin:0; font-size:13.5px; line-height:1.62; color:var(--yg-muted); }
/* --- how you save: dark band + 4 steps --- */
.yg-about__save{
background:var(--yg-secondary); color:#fff;
border-radius:var(--yg-r-lg); padding:clamp(26px, 4vw, 48px);
}
.yg-about__save .yg-about__lead{ margin-bottom:clamp(20px, 3vw, 30px); }
.yg-about__save .yg-about__lead h2{ color:#fff !important; }
.yg-about__steps{
list-style:none; margin:0; padding:0;
display:grid; gap:16px; grid-template-columns:1fr;
}
@media (min-width:600px){ .yg-about__steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1040px){ .yg-about__steps{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.yg-about__step{
position:relative;
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
border-radius:var(--yg-r-md); padding:20px 18px 18px;
}
.yg-about__stepno{
display:inline-flex; align-items:center; justify-content:center;
width:30px; height:30px; border-radius:50%;
background:var(--yg-primary); color:var(--yg-secondary);
font-weight:800; font-size:14px;
}
.yg-about__stepic{ position:absolute; top:20px; right:18px; color:rgba(255,255,255,.30); }
.yg-about__stepic .yg-i{ width:20px; height:20px; }
.yg-about__step h3{
font-family:'Manrope', sans-serif !important; font-size:15.5px; font-weight:800;
margin:14px 0 6px; color:#fff !important;
}
.yg-about__step p{ margin:0; font-size:13px; line-height:1.6; color:rgba(255,255,255,.68); }
@media (min-width:1040px){
.yg-about__step:not(:last-child)::after{
content:""; position:absolute; top:35px; right:-11px; width:22px; height:2px;
background:rgba(255,255,255,.18);
}
}
/* --- from the founder --- */
.yg-about__founder{
display:grid; gap:clamp(22px, 4vw, 44px);
padding:clamp(24px, 4vw, 44px);
border:1px solid var(--yg-border); border-radius:var(--yg-r-lg);
background:
radial-gradient(120% 140% at 0% 0%, rgba(69,133,255,.08), transparent 60%),
radial-gradient(120% 140% at 100% 100%, rgba(126,107,242,.10), transparent 60%),
#fff;
position:relative; overflow:hidden;
}
.yg-about__founder::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
background:linear-gradient(180deg, #4585FF, #7E6BF2 55%, var(--yg-primary));
}
.yg-about__founder::after{
content:"\201D"; position:absolute; right:clamp(14px, 3vw, 40px); bottom:-.18em;
font-family:'Fraunces', serif; font-size:clamp(140px, 16vw, 240px); line-height:1;
color:#7E6BF2; opacity:.09; pointer-events:none; z-index:0;
}
.yg-about__founder > *{ position:relative; z-index:1; }
.yg-about__founder-id{ display:flex; flex-direction:column; gap:16px; }
.yg-about__sig{
width:min(210px, 62vw); height:auto; opacity:.92;
}
.yg-about__idrow{ display:flex; align-items:center; gap:12px; }
.yg-about__mono{
flex:0 0 auto; width:46px; height:46px; border-radius:12px;
display:grid; place-items:center;
font-family:'Manrope', sans-serif; font-weight:800; font-size:16px; letter-spacing:.02em;
color:#fff; background:linear-gradient(135deg, #4585FF, #7E6BF2);
}
.yg-about__idmeta{ display:flex; flex-direction:column; gap:2px; }
.yg-about__fname{ font-weight:800; font-size:14.5px; color:var(--yg-secondary); }
.yg-about__frole{ font-size:12px; color:var(--yg-muted); line-height:1.45; }
.yg-about__founder-body .yg-about__kicker{ margin-bottom:10px; }
.yg-about__founder-body h2{
font-family:'Fraunces', serif; font-size:clamp(21px, 1.5vw + 12px, 32px);
line-height:1.16; letter-spacing:-.01em; margin:0 0 14px; color:var(--yg-secondary);
}
.yg-about__founder-body .yg-about__prose{ max-width:66ch; }
.yg-about__founder-body .yg-about__prose p{ font-size:clamp(14.5px, .35vw + 12px, 16px); line-height:1.72; }
.yg-about__founder-body .yg-about__prose p:first-child{ color:#3a3552; font-size:clamp(14.5px, .35vw + 12px, 16px); }
@media (min-width:900px){
.yg-about__founder{ grid-template-columns:minmax(0,210px) minmax(0,1fr); align-items:center; }
.yg-about__founder-id{ align-self:center; }
}
/* --- the journey: three beats --- */
.yg-about__beats{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:800px){ .yg-about__beats{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.yg-about__beat{
border:1px solid var(--yg-border); border-radius:var(--yg-r-lg);
background:var(--yg-card); padding:22px 20px; box-shadow:var(--yg-sh-sm);
}
.yg-about__beat .yg-about__kicker{ margin-bottom:9px; color:var(--yg-muted); }
.yg-about__beat--now{ border-color:var(--yg-primary); }
.yg-about__beat--now .yg-about__kicker{ color:var(--yg-primary); }
.yg-about__beat p{ margin:0; font-size:13.5px; line-height:1.62; color:var(--yg-muted); }
.yg-about__beatnote{
margin:clamp(18px, 3vw, 26px) auto 0; max-width:60ch; text-align:center;
font-size:13.5px; line-height:1.6; color:var(--yg-muted); font-style:italic;
}
/* --- closing CTA --- */
.yg-about__cta{
text-align:center; color:#fff; border-radius:var(--yg-r-lg);
padding:clamp(30px, 5vw, 54px) clamp(20px, 4vw, 40px);
background:linear-gradient(135deg, #4585FF 0%, #7E6BF2 52%, #FF7A1A 130%);
}
.yg-about__cta h2{
font-family:'Fraunces', serif; font-size:clamp(22px, 1.6vw + 13px, 32px);
line-height:1.16; margin:0; color:#fff !important;
}
.yg-about__cta p{ margin:10px 0 22px; font-size:15px; color:rgba(255,255,255,.92); }
.yg-about__ctabtns{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.yg-about__cta .yg-btn--ghost{
background:rgba(255,255,255,.14) !important; border-color:rgba(255,255,255,.45) !important; color:#fff !important;
}
.yg-about__cta .yg-btn--ghost:hover{ background:rgba(255,255,255,.26) !important; border-color:#fff !important; }
@media (max-width:768px){
.yg-about-hero{ min-height:0; }
.yg-about-hero__art{ opacity:.32; }
.yg-about-hero::before{
background:linear-gradient(90deg, var(--yg-secondary) 0%, rgba(20,16,43,.9) 55%, rgba(20,16,43,.7) 100%);
}
}
/* ---------- 24. POLICY PAGES (page-affiliate-disclosure.php) ---------- */
.yg-policy-hero{
position:relative; isolation:isolate;
background:var(--yg-secondary); color:#fff;
display:flex; align-items:center;
min-height:clamp(190px, 24vw, 288px);
}
.yg-policy-hero::before{
content:""; position:absolute; left:0; right:0; top:0; height:3px;
background:linear-gradient(90deg, transparent 0%, #4585FF 22%, #7E6BF2 44%, var(--yg-primary) 66%, transparent 100%);
opacity:.75;
}
.yg-policy-hero::after{
content:""; position:absolute; inset:0; z-index:-1;
background:radial-gradient(120% 150% at 100% 0%, rgba(126,107,242,.20), transparent 62%);
}
.yg-policy-hero__inner{ width:100%; padding-block:clamp(34px, 5vw, 56px); }
.yg-policy-hero__eyebrow{
display:inline-block; margin-bottom:10px;
font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--yg-primary);
}
.yg-policy-hero__title{
font-family:'Fraunces', serif; font-size:clamp(26px, 2.4vw + 14px, 44px);
line-height:1.1; letter-spacing:-.01em; margin:0; color:#fff !important;
}
.yg-policy-hero__sub{
margin:14px 0 0; max-width:60ch;
font-size:clamp(14.5px, .5vw + 12px, 17px); line-height:1.6; color:rgba(255,255,255,.76);
}
.yg-policy-hero__meta{
display:inline-block; margin-top:16px;
font-size:11.5px; font-weight:700; letter-spacing:.02em; color:rgba(255,255,255,.5);
}
.yg-policy{ padding-block:clamp(28px, 4vw, 48px); }
/* prominent disclosure callout */
.yg-policy__callout{
display:flex; gap:14px; align-items:flex-start;
margin-bottom:clamp(26px, 4vw, 40px);
padding:clamp(16px, 2.4vw, 24px);
border:1px solid var(--yg-primary-hover);
border-left-width:4px;
border-radius:var(--yg-r-lg);
background:var(--yg-tint);
}
.yg-policy__calloutic{
flex:0 0 auto; width:38px; height:38px; border-radius:10px;
display:grid; place-items:center; background:var(--yg-primary); color:var(--yg-secondary);
}
.yg-policy__calloutic .yg-i{ width:19px; height:19px; }
.yg-policy__calloutlead{
margin:0; font-size:clamp(14.5px, .5vw + 12px, 16.5px); line-height:1.6;
font-weight:700; color:var(--yg-secondary);
}
.yg-policy__calloutfine{
margin:8px 0 0; font-size:13px; line-height:1.6; color:#5b5470;
}
.yg-policy__body{ max-width:760px; }
.yg-policy__block{ position:relative; padding-top:clamp(22px, 3.5vw, 34px); margin-top:clamp(22px, 3.5vw, 34px); border-top:1px solid var(--yg-border); }
.yg-policy__body > .yg-policy__block:first-child{ border-top:0; margin-top:0; padding-top:0; }
.yg-policy__num{
display:inline-grid; place-items:center;
width:28px; height:28px; margin-bottom:10px;
border-radius:8px; background:var(--yg-secondary); color:#fff;
font-family:'Manrope', sans-serif; font-weight:800; font-size:13px;
}
.yg-policy__block h2{
font-family:'Fraunces', serif; font-size:clamp(19px, 1vw + 13px, 26px);
line-height:1.2; letter-spacing:-.01em; margin:0 0 12px; color:var(--yg-secondary) !important;
}
.yg-policy__block p{
margin:0 0 12px; font-size:clamp(14.5px, .35vw + 12px, 16px); line-height:1.72; color:#3a3552;
}
.yg-policy__block p:last-child{ margin-bottom:0; }
.yg-policy__block a:not(.yg-btn){ color:var(--yg-primary-hover); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.yg-policy__block .yg-btn{ margin-top:4px; }
/* the "how it works" step flow */
.yg-policy__flow{ list-style:none; margin:14px 0 12px; padding:0; display:flex; flex-direction:column; gap:10px; }
.yg-policy__flow li{
position:relative; display:flex; gap:12px; align-items:flex-start;
padding:13px 15px; border:1px solid var(--yg-border); border-radius:var(--yg-r-md); background:var(--yg-card);
font-size:14px; line-height:1.55; color:#3a3552;
}
.yg-policy__flow li strong{ color:var(--yg-secondary); font-weight:700; }
.yg-policy__flownum{
flex:0 0 auto; width:24px; height:24px; border-radius:50%;
display:grid; place-items:center; background:var(--yg-tint); color:var(--yg-primary-hover);
font-family:'Manrope', sans-serif; font-weight:800; font-size:12px;
}
.yg-policy__flow li:not(:last-child)::after{
content:""; position:absolute; left:26px; bottom:-11px; width:2px; height:11px; background:var(--yg-border);
}
.yg-policy__note{
font-size:13px !important; line-height:1.6 !important; color:var(--yg-muted) !important;
padding-left:12px; border-left:3px solid var(--yg-border);
}
/* the "no extra cost" answer block */
.yg-policy__answer{
display:flex; gap:14px; align-items:flex-start;
padding:clamp(15px, 2.2vw, 22px);
border:1px solid #BBE7C8; border-left-width:4px;
border-radius:var(--yg-r-lg); background:#EAF7EE;
}
.yg-policy__answeric{
flex:0 0 auto; width:36px; height:36px; border-radius:50%;
display:grid; place-items:center; background:var(--yg-success); color:#fff;
}
.yg-policy__answeric .yg-i{ width:19px; height:19px; }
.yg-policy__answerlead{
margin:0 0 8px !important; font-weight:800; color:#14532d !important; font-size:clamp(15px, .5vw + 12px, 17px) !important;
}
.yg-policy__answer p:not(.yg-policy__answerlead){ color:#2f4a38 !important; margin:0 !important; }
@media (max-width:600px){
.yg-policy__callout{ flex-direction:column; gap:10px; }
}
/* ---------- 25. PRIVACY / LEGAL editorial extras (page-activate-2.php, page-terms-conditions.php) ---------- */
/* hero variant that carries a full-bleed 3D illustration */
.yg-policy-hero--art{ overflow:hidden; isolation:isolate; min-height:clamp(240px, 30vw, 360px); }
.yg-policy-hero--art .yg-policy-hero__inner{ position:relative; z-index:1; }
.yg-policy-hero__art{
position:absolute; top:0; right:0; bottom:0; left:auto;
height:100%; width:auto; max-width:none; object-fit:cover; object-position:right center;
z-index:-2; pointer-events:none; user-select:none;
}
.yg-policy-hero--art::after{
content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(90deg, var(--yg-secondary) 0%, rgba(20,16,43,.92) 40%, rgba(20,16,43,.35) 68%, rgba(20,16,43,0) 100%);
}
@media (max-width:768px){
.yg-policy-hero--art{ min-height:0; }
.yg-policy-hero__art{ opacity:.3; }
.yg-policy-hero--art::after{ background:linear-gradient(90deg, var(--yg-secondary) 0%, rgba(20,16,43,.9) 58%, rgba(20,16,43,.72) 100%); }
}
/* "Your privacy in simple terms" summary */
.yg-policy__kicker{
display:inline-block; margin-bottom:9px;
font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--yg-primary);
}
.yg-policy__summary{
margin-bottom:clamp(28px, 4vw, 44px);
padding:clamp(20px, 3vw, 32px);
border:1px solid var(--yg-border); border-radius:var(--yg-r-lg);
background:
radial-gradient(130% 130% at 0% 0%, rgba(69,133,255,.07), transparent 60%),
radial-gradient(130% 130% at 100% 100%, rgba(126,107,242,.09), transparent 60%),
var(--yg-card);
}
.yg-policy__summaryhead h2{
font-family:'Fraunces', serif; font-size:clamp(20px, 1.4vw + 12px, 30px);
line-height:1.18; margin:0 0 14px; color:var(--yg-secondary) !important;
}
.yg-policy__simplelist{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.yg-policy__simplelist li{
display:flex; gap:11px; align-items:flex-start;
font-size:clamp(14px, .4vw + 12px, 15.5px); line-height:1.58; color:#3a3552;
}
.yg-policy__simplelist .yg-i{ flex:0 0 auto; width:17px; height:17px; margin-top:2px; color:var(--yg-success); }
.yg-policy__spots{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
margin-top:20px; padding-top:20px; border-top:1px solid var(--yg-border);
}
@media (min-width:720px){ .yg-policy__spots{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:620px){ .yg-policy__spots.yg-policy__spots--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.yg-policy__spots figure{
margin:0; display:flex; flex-direction:column; align-items:center; gap:6px;
padding:12px 8px; border:1px solid var(--yg-border); border-radius:var(--yg-r-md); background:#fff;
}
.yg-policy__spots img{ width:clamp(76px, 26vw, 104px); height:auto; }
.yg-policy__spots figcaption{
font-size:11.5px; font-weight:700; letter-spacing:.02em; color:var(--yg-muted); text-align:center;
}
/* small spot illustration on the numbered-heading line */
.yg-policy__block{ position:relative; }
.yg-policy__block .yg-policy__num{ vertical-align:middle; }
.yg-policy__spot{
display:inline-block; vertical-align:middle;
width:46px; height:auto; margin:0 0 10px 12px;
padding:4px; border-radius:10px; background:var(--yg-bg);
}
@media (max-width:520px){ .yg-policy__spot{ width:40px; } }
/* sub-headings + lists inside a policy block */
.yg-policy__subh{
font-family:'Manrope', sans-serif !important; font-size:14px !important; font-weight:800 !important;
letter-spacing:.01em; color:var(--yg-secondary) !important;
margin:18px 0 8px !important; text-transform:none;
}
.yg-policy__list{ margin:0 0 12px; padding-left:22px; list-style:disc; }
.yg-policy__list li{ font-size:clamp(14px, .35vw + 12px, 15.5px); line-height:1.62; color:#3a3552; margin:0 0 7px; padding-left:3px; }
.yg-policy__list li::marker{ color:var(--yg-primary); }
.yg-policy__list li strong{ color:var(--yg-secondary); font-weight:700; }
.yg-policy__deflist{ margin:6px 0 12px; display:flex; flex-direction:column; gap:10px; }
.yg-policy__deflist > div{
padding:12px 14px; border:1px solid var(--yg-border); border-radius:var(--yg-r-md); background:var(--yg-card);
}
.yg-policy__deflist dt{ font-weight:800; font-size:13.5px; color:var(--yg-secondary); margin-bottom:3px; }
.yg-policy__deflist dd{ margin:0; font-size:13.5px; line-height:1.58; color:var(--yg-muted); }
/* ---------- 26. CONTACT PAGE — "Partner with YourGuruz" CTA (in page content) ---------- */
.yg-partner-cta{
display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px;
position:relative; overflow:hidden;
margin:0 0 clamp(22px, 3.5vw, 34px);
padding:clamp(18px, 2.6vw, 26px) clamp(18px, 2.6vw, 28px);
border-radius:var(--yg-r-lg);
background:var(--yg-secondary); color:rgba(255,255,255,.82);
}
.yg-partner-cta::before{
content:""; position:absolute; left:0; right:0; top:0; height:3px;
background:linear-gradient(90deg, transparent 0%, #4585FF 24%, #7E6BF2 44%, var(--yg-primary) 66%, transparent 100%);
opacity:.75;
}
.yg-partner-cta::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(120% 170% at 100% 0%, rgba(126,107,242,.18), transparent 60%);
}
.yg-partner-cta > *{ position:relative; z-index:1; }
.yg-partner-cta__icon{
flex:0 0 auto; width:46px; height:46px; border-radius:12px;
display:grid; place-items:center;
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
color:var(--yg-primary);
}
.yg-partner-cta__icon svg{ width:22px; height:22px; }
.yg-partner-cta__body{ flex:1 1 300px; min-width:0; }
.yg-partner-cta__title{
margin:0 0 4px !important; padding:0 !important;
font-family:'Manrope', sans-serif !important;
font-size:clamp(15px, .6vw + 13px, 18px) !important; font-weight:800 !important;
line-height:1.25 !important; letter-spacing:.01em; color:#fff !important; background:none !important;
}
.yg-partner-cta__text{
margin:0; font-size:13px; line-height:1.55; color:rgba(255,255,255,.66); max-width:62ch;
}
.yg-partner-cta__cta{
flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
padding:10px 16px; border-radius:var(--yg-r-pill);
background:var(--yg-primary); color:var(--yg-secondary) !important;
font-weight:800; font-size:13px; text-decoration:none !important; white-space:nowrap;
transition:transform .14s ease, background .14s ease;
}
.yg-partner-cta__cta:hover{ background:var(--yg-primary-hover); transform:translateY(-1px); color:var(--yg-secondary) !important; }
.yg-partner-cta__cta svg{ width:15px; height:15px; flex:0 0 auto; }
@media (max-width:600px){
.yg-partner-cta{ gap:14px; }
.yg-partner-cta__cta{ width:100%; justify-content:center; }
}
/* ---------- 27. PARTNER WITH US (page-partner-with-us.php) ---------- */
.yg-policy-hero__cta{
display:inline-flex; align-items:center; gap:8px; margin-top:20px;
}
.yg-policy-hero__cta .yg-i{ width:15px; height:15px; }
/* the 2-column brand showcase — a structured card grid, not a logo wall */
.yg-partners__showcase .yg-about__lead{ max-width:64ch; }
.yg-partners__brands{
display:grid; grid-template-columns:1fr; gap:14px;
margin-top:clamp(18px, 3vw, 26px);
}
@media (min-width:560px){
.yg-partners__brands{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.yg-partner-card{
display:flex; align-items:center; gap:16px;
padding:18px 20px;
border:1px solid var(--yg-border); border-radius:var(--yg-r-lg);
background:var(--yg-card); box-shadow:var(--yg-sh-sm);
}
/* wordmark brand card — uniform plate, single ink colour, consistent scale */
.yg-partner-card--wm{
position:relative; overflow:hidden;
display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:0;
min-height:86px; padding:16px 22px 15px;
background:
linear-gradient(180deg, #fff, var(--yg-bg) 240%),
var(--yg-card);
transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.yg-partner-card--wm::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
background:var(--yg-primary); opacity:.9;
}
.yg-partner-card--wm.c-azure::before{ background:#4585FF; }
.yg-partner-card--wm.c-violet::before{ background:#7E6BF2; }
.yg-partner-card--wm.c-indigo::before{ background:#2E2557; }
.yg-partner-card--wm.c-marigold::before{ background:#FF7A1A; }
.yg-partner-card--wm:hover{
transform:translateY(-2px);
border-color:#D9D2F2;
box-shadow:var(--yg-sh-md);
}
.yg-partner-card__wm{
font-family:'Manrope', sans-serif; font-weight:800; letter-spacing:-.015em;
font-size:clamp(17px, .7vw + 13px, 21px); line-height:1.12; color:var(--yg-secondary);
overflow-wrap:anywhere;
}
.yg-partner-card__bar{
width:24px; height:3px; border-radius:2px; margin:9px 0 8px;
background:linear-gradient(90deg, var(--yg-primary), #7E6BF2);
transition:width .18s ease;
}
.yg-partner-card--wm:hover .yg-partner-card__bar{ width:42px; }
.yg-partner-card__cat{
font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--yg-muted);
}
/* keep the (now unused) monogram styles harmless if referenced elsewhere */
.yg-partner-card__b{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.yg-partner-card__name{
font-family:'Manrope', sans-serif !important; font-weight:800;
font-size:15.5px; line-height:1.2; color:var(--yg-secondary) !important; margin:0;
}
.yg-partners__note{
margin:clamp(16px, 2.5vw, 22px) 0 0;
font-size:12px; line-height:1.55; color:var(--yg-muted); max-width:70ch;
}
/* ---------- 29. HOMEPAGE NEWSLETTER (#yg-home-newsletter / .yg-news) ----------
The current section markup (.yg-news / .yg-news__form) had no dedicated
rules, so REHub's global form CSS was making .mc4wp-form-fields a flex
column and stretching the email to ~200px tall on mobile. Take
full control of the form here; keep the button compact. */
.yg-news .yg-news__form,
.yg-news .yg-news__form form,
.yg-news .mc4wp-form{ margin:0 !important; height:auto !important; max-width:520px; }
.yg-news .mc4wp-form-fields{
display:flex !important; flex-flow:row wrap !important;
align-items:flex-start !important; align-content:flex-start !important;
gap:10px !important; height:auto !important; min-height:0 !important;
}
/* email field — never grows (that is what was stretching it to ~200px in
the column layout); fixed 46px height, wins over REHub's global form CSS. */
.yg-news .mc4wp-form input[type="email"],
.yg-news .mc4wp-form input[type="text"]:not([tabindex="-1"]){
flex:1 1 220px !important; min-width:0; width:auto;
height:46px !important; min-height:46px !important; max-height:46px !important;
padding:0 14px !important; margin:0 !important; box-sizing:border-box !important;
border:1px solid var(--yg-border) !important; border-radius:var(--yg-r-sm) !important;
background:#fff !important; color:var(--yg-text) !important;
font-size:14px !important; line-height:1.2 !important;
}
.yg-news .mc4wp-form input[type="submit"],
.yg-news .mc4wp-form button[type="submit"]{
flex:0 0 auto !important; width:auto !important;
height:46px !important; min-height:46px !important; max-height:46px !important;
padding:0 22px !important; margin:0 !important; box-sizing:border-box !important;
background:var(--yg-primary) !important; color:var(--yg-secondary) !important;
border:1px solid var(--yg-primary-hover) !important; border-radius:var(--yg-r-sm) !important;
font-family:'Manrope', sans-serif !important; font-weight:800 !important; font-size:14px !important;
letter-spacing:.01em; cursor:pointer; transition:background .14s ease;
-webkit-appearance:none; appearance:none;
}
.yg-news .mc4wp-form input[type="submit"]:hover,
.yg-news .mc4wp-form button[type="submit"]:hover{ background:var(--yg-primary-hover) !important; }
.yg-news .mc4wp-response{ flex:1 1 100%; margin:8px 0 0; font-size:12.5px; color:rgba(255,255,255,.86); }
.yg-news .mc4wp-response a{ color:#fff; text-decoration:underline; }
/* small phones: stack, email full width, button compact (not full-bleed) */
@media (max-width:430px){
.yg-news .mc4wp-form input[type="email"]{ flex:1 1 100% !important; width:100% !important; }
.yg-news .mc4wp-form input[type="submit"],
.yg-news .mc4wp-form button[type="submit"]{ align-self:flex-start; padding:0 30px !important; }
}
/* ---------- 28. PARTNER — "Our Impact" audited-numbers band ---------- */
.yg-impact{
position:relative; overflow:hidden; isolation:isolate;
border-radius:var(--yg-r-lg);
padding:clamp(26px, 4vw, 46px);
background:var(--yg-secondary); color:rgba(255,255,255,.8);
}
.yg-impact::before{
content:""; position:absolute; left:0; right:0; top:0; height:3px;
background:linear-gradient(90deg, transparent 0%, #4585FF 22%, #7E6BF2 44%, var(--yg-primary) 66%, transparent 100%);
opacity:.8;
}
.yg-impact::after{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background:
radial-gradient(85% 120% at 0% 0%, rgba(69,133,255,.20), transparent 55%),
radial-gradient(85% 120% at 100% 100%, rgba(126,107,242,.22), transparent 55%);
}
.yg-impact__head{ max-width:60ch; margin-bottom:clamp(20px, 3vw, 30px); }
.yg-impact__head .yg-about__kicker{ color:var(--yg-primary); }
.yg-impact__head h2{
color:#fff !important; font-family:'Fraunces', serif;
font-size:clamp(22px, 1.6vw + 12px, 34px); line-height:1.16; letter-spacing:-.01em; margin:0 0 10px;
}
.yg-impact__head p{
margin:0; font-size:clamp(14px, .5vw + 12px, 16px); line-height:1.6; color:rgba(255,255,255,.66);
}
.yg-impact__grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
@media (min-width:760px){ .yg-impact__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; } }
.yg-impact__card{
display:flex; flex-direction:column; align-items:flex-start;
padding:clamp(15px, 2.2vw, 24px);
border:1px solid rgba(255,255,255,.10); border-radius:var(--yg-r-md);
background:rgba(255,255,255,.045);
transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.yg-impact__card:hover{
transform:translateY(-3px);
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.22);
box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.yg-impact__value{
font-family:'Manrope', sans-serif; font-weight:800; letter-spacing:-.01em;
font-size:clamp(21px, 1vw + 15px, 31px); line-height:1.12; color:#fff;
overflow-wrap:anywhere;
}
.yg-impact__bar{
width:34px; height:3px; border-radius:2px; margin:10px 0 9px;
background:linear-gradient(90deg, var(--yg-primary), #7E6BF2);
transition:width .2s ease;
}
.yg-impact__card:hover .yg-impact__bar{ width:54px; }
.yg-impact__label{
font-size:12.5px; line-height:1.42; font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.62);
}
@media (prefers-reduced-motion:no-preference){
/* fade-only entrance — no transform here, so the :hover lift is never overridden */
.yg-impact__card{ animation:ygImpactIn .5s ease both; }
.yg-impact__card:nth-child(1){ animation-delay:.04s } .yg-impact__card:nth-child(2){ animation-delay:.09s }
.yg-impact__card:nth-child(3){ animation-delay:.14s } .yg-impact__card:nth-child(4){ animation-delay:.19s }
.yg-impact__card:nth-child(5){ animation-delay:.24s } .yg-impact__card:nth-child(6){ animation-delay:.29s }
}
@keyframes ygImpactIn{ from{ opacity:0; } to{ opacity:1; } }
/* ---------- 30. HEADER SEARCH — make STORE / brand results obvious ----------
REHub's AJAX live-search returns matching `dealstore` terms first, each
linking to /dealstore/{slug}/. They share the same markup as coupon/deal
rows, so a brand search didn't visibly surface the brand. Tag the store
rows (link contains /dealstore/) with a tint + a "Store" badge. Applies
to both the desktop header dropdown and the mobile search overlay
(.re-aj-search-wrap in either place). */
.re-aj-search-wrap .re-search-result-div{ position:relative; }
.re-aj-search-wrap .re-search-result-div:has(a[href*="/dealstore/"]){
background:var(--yg-bg);
border:1px solid var(--yg-border);
border-radius:10px;
margin:2px 0 6px;
}
.re-aj-search-wrap .re-search-result-div:has(a[href*="/dealstore/"]) .re-search-result-title{
display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.re-aj-search-wrap .re-search-result-div:has(a[href*="/dealstore/"]) .re-search-result-title a{
font-weight:800 !important;
}
.re-aj-search-wrap .re-search-result-div:has(a[href*="/dealstore/"]) .re-search-result-title::after{
content:"Store";
font-family:'Manrope', sans-serif; font-weight:800; font-size:9px; letter-spacing:.07em;
text-transform:uppercase; line-height:1.35;
color:var(--yg-secondary); background:var(--yg-primary);
padding:2px 7px; border-radius:var(--yg-r-pill);
}
.re-aj-search-wrap .re-search-result-div:has(a[href*="/dealstore/"]) .re-search-result-price:empty{ display:none; }
/* fallback tag (added by yg-ui.js) for engines without :has() support */
.re-aj-search-wrap .re-search-result-div.yg-search-store{
background:var(--yg-bg); border:1px solid var(--yg-border); border-radius:10px; margin:2px 0 6px;
}
.re-aj-search-wrap .re-search-result-div.yg-search-store .re-search-result-title{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.re-aj-search-wrap .re-search-result-div.yg-search-store .re-search-result-title a{ font-weight:800 !important; }
.re-aj-search-wrap .re-search-result-div.yg-search-store .re-search-result-title::after{
content:"Store"; font-family:'Manrope', sans-serif; font-weight:800; font-size:9px; letter-spacing:.07em;
text-transform:uppercase; line-height:1.35; color:var(--yg-secondary); background:var(--yg-primary);
padding:2px 7px; border-radius:var(--yg-r-pill);
}
.re-aj-search-wrap .re-search-result-div.yg-search-store .re-search-result-price:empty{ display:none; }
/* ==========================================================
31. COMMUNITY / DEAL-ALERT CHANNELS (.yg-community)
Two contexts, one component (inc/components.php → yg_c_community()):
• store / dealstore pages → ONE horizontal branded strip:
[ Telegram + CTA ] │ [ WhatsApp + CTA ] (.yg-community--strip)
Placed AFTER the About section. No separate boxed cards —
both halves share one panel, split by a hairline divider.
• homepage → Telegram only, one contained panel (.yg-community--solo)
========================================================== */
.yg-community{ margin:0; }
/* store page: it now follows About — space + hairline it off */
.yg-store__main > .yg-community{
margin-top:clamp(26px, 4.5vw, 40px);
padding-top:clamp(20px, 3.5vw, 30px);
border-top:1px solid var(--yg-border);
}
.yg-community__head{ margin-bottom:14px; }
.yg-community__eyebrow{
display:inline-block; font-family:'Manrope', sans-serif;
font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
color:var(--yg-primary-hover); margin-bottom:5px;
}
.yg-community__title{
font-family:'Fraunces', Georgia, serif; font-weight:700;
font-size:clamp(17px, 2vw, 20px); line-height:1.25;
color:var(--yg-secondary); margin:0;
}
.yg-community__lead{ margin:6px 0 0; max-width:62ch; font-size:13px; line-height:1.55; color:var(--yg-muted); }
/* shared item bits */
.yg-community__icon{
flex:0 0 auto; width:42px; height:42px; border-radius:11px;
background:#fff; display:grid; place-items:center;
}
.yg-community__svg{ width:24px; height:24px; display:block; }
.yg-community__item--tg .yg-community__svg{ color:#229ED9; }
.yg-community__item--wa .yg-community__svg{ color:#25D366; }
.yg-community__body{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.yg-community__ct{
font-family:'Fraunces', Georgia, serif; font-weight:700;
font-size:15.5px; line-height:1.3; color:#fff !important; margin:0;
}
.yg-community__cp{ margin:0; font-size:12.5px; line-height:1.55; color:#C9C3E6; }
.yg-community__cta{
margin-top:9px; align-self:flex-start;
display:inline-flex; align-items:center; gap:8px;
background:var(--yg-primary); color:var(--yg-secondary);
font-family:'Manrope', sans-serif; font-weight:800; font-size:12.5px; letter-spacing:.04em;
padding:10px 18px; border-radius:var(--yg-r-sm);
text-decoration:none; border:1px solid var(--yg-primary-hover);
transition:background .15s ease, transform .15s ease;
}
.yg-community__cta:hover,
.yg-community__cta:focus-visible{ background:var(--yg-primary-hover); transform:translateY(-1px); color:var(--yg-secondary); }
.yg-community__ctaic{ width:14px; height:14px; display:block; }
/* ---- STORE STRIP ---- */
.yg-community--strip .yg-community__panel{
display:grid; grid-template-columns:1fr;
background:linear-gradient(118deg, #14102B 0%, #1E1740 52%, #14102B 100%);
border:1px solid rgba(255,255,255,.08);
border-radius:var(--yg-card-r); overflow:hidden;
}
.yg-community--strip .yg-community__item{
display:flex; gap:14px; padding:20px 22px; color:#fff;
}
.yg-community--strip .yg-community__item + .yg-community__item{
border-top:1px solid rgba(255,255,255,.10);
}
@media (min-width:860px){
.yg-community--strip .yg-community__panel{ grid-template-columns:1fr 1fr; }
.yg-community--strip .yg-community__item{ padding:22px 26px; }
.yg-community--strip .yg-community__item + .yg-community__item{
border-top:0; border-left:1px solid rgba(255,255,255,.10);
}
}
@media (max-width:600px){
.yg-community--strip .yg-community__cta{ align-self:stretch; justify-content:center; padding:13px 18px; }
}
/* ---- HOMEPAGE SOLO PANEL ---- */
.yg-community--solo .yg-community__panel{
max-width:600px; margin-inline:auto;
display:flex; flex-direction:column; gap:14px;
background:linear-gradient(118deg, #14102B 0%, #1E1740 55%, #14102B 100%);
border:1px solid rgba(255,255,255,.08); border-top:3px solid #229ED9;
border-radius:var(--yg-card-r); padding:24px;
}
.yg-community--solo .yg-community__item{ display:flex; flex-direction:column; gap:12px; color:#fff; }
.yg-community--solo .yg-community__ct{ font-size:18px; }
.yg-community--solo .yg-community__cp{ font-size:13px; color:#C9C3E6; }
.yg-community--solo .yg-community__tags{
list-style:none; margin:2px 0 0; padding:0;
display:flex; flex-wrap:wrap; gap:6px; align-items:center;
}
.yg-community--solo .yg-community__tags li{
font-family:'Manrope', sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.02em;
color:#EDE9FB; background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.14); border-radius:var(--yg-r-pill);
padding:3px 9px; white-space:nowrap;
}
.yg-community--solo .yg-community__tags .yg-community__tagslabel{
background:none; border:0; padding:0 2px 0 0;
color:#9E97C8; text-transform:uppercase; font-size:9.5px; letter-spacing:.08em;
}
@media (max-width:600px){
.yg-community--solo .yg-community__panel{ padding:20px; }
.yg-community--solo .yg-community__cta{ align-self:stretch; justify-content:center; padding:14px 20px; font-size:13.5px; }
}
/* ==========================================================
32. SHOPPING HUB (/shopping/ — [yg_shopping_page])
Product-first e-commerce discovery, rendered in .yg-home.yg-shop so
it reuses the homepage section rhythm + .yg-carousel. Its own card
(.yg-shop-card) — image · brand · title · MRP · price · discount ·
SHOP NOW. No coupon UI, no "Get Deal" (that lives in .yg-getdeals).
========================================================== */
.yg-shop{ padding-block:clamp(12px,2vw,20px) clamp(28px,4vw,48px); }
.yg-shop .yg-hs--band{
margin-inline:0 !important; background:var(--yg-bg);
border-radius:var(--yg-r-lg); padding:clamp(20px,3vw,32px);
}
.yg-shop .yg-hs{ margin-bottom:clamp(28px,4vw,48px); }
.yg-shop-empty,
.yg-shop-cats__empty{ text-align:center; color:var(--yg-muted); font-size:13.5px; padding:28px 0; }
/* ---- Hero (wide + short) + product/store search ---- */
.yg-shophero{
position:relative; overflow:hidden;
border:1px solid var(--yg-border); border-radius:var(--yg-r-lg);
background:
radial-gradient(120% 150% at 0% 0%, #F1EDFF 0%, rgba(255,255,255,0) 44%),
radial-gradient(130% 160% at 100% 100%, #FFF1E4 0%, rgba(255,255,255,0) 42%),
#fff;
padding:clamp(24px,4vw,44px);
}
.yg-shophero__eyebrow{
display:inline-block; font-family:'Manrope',sans-serif;
font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
color:var(--yg-primary-hover); margin-bottom:8px;
}
.yg-shophero__title{
font-family:'Fraunces',Georgia,serif; font-weight:700;
font-size:clamp(24px,3.6vw,36px); line-height:1.12;
color:var(--yg-secondary); margin:0 0 10px; max-width:22ch;
}
.yg-shophero__lead{ margin:0 0 18px; max-width:64ch; font-size:14px; line-height:1.6; color:var(--yg-muted); }
.yg-shopsearch{
display:flex; align-items:stretch; gap:8px; max-width:620px;
background:#fff; border:1px solid var(--yg-border); border-radius:var(--yg-r-pill);
padding:5px 5px 5px 14px; box-shadow:var(--yg-sh-sm);
}
.yg-shopsearch__ic{ display:flex; align-items:center; color:var(--yg-muted); }
.yg-shopsearch__ic svg{ width:18px; height:18px; }
.yg-shopsearch input{
flex:1 1 auto; min-width:0; border:0; background:transparent; outline:none;
font-family:'Manrope',sans-serif; font-size:14px; color:var(--yg-text);
}
.yg-shopsearch .yg-btn{ flex:0 0 auto; border-radius:var(--yg-r-pill); padding:10px 20px; font-size:13px; }
/* ---- Popular Shopping Stores (compact chips) ---- */
.yg-shop-secline{ margin-bottom:12px; }
.yg-shop-secline__t{
margin:0; font-family:'Fraunces',Georgia,serif; font-weight:700;
font-size:clamp(16px,1.8vw,19px); color:var(--yg-secondary);
}
.yg-shop-storechips{ display:flex; flex-wrap:wrap; gap:8px; }
.yg-shop-storechip{
display:inline-flex; align-items:center; gap:6px;
font-family:'Manrope',sans-serif; font-weight:700; font-size:12.5px;
color:var(--yg-secondary); background:var(--yg-card);
border:1px solid var(--yg-border); border-radius:var(--yg-r-pill);
padding:8px 14px; text-decoration:none;
transition:border-color .14s ease, background .14s ease, color .14s ease;
}
.yg-shop-storechip span{
font-size:10.5px; font-weight:800; color:var(--yg-muted);
background:var(--yg-bg); border-radius:var(--yg-r-pill); padding:1px 6px;
}
.yg-shop-storechip:hover{ border-color:var(--yg-primary); }
.yg-shop-storechip.is-active{ background:var(--yg-secondary); color:#fff; border-color:var(--yg-secondary); }
.yg-shop-storechip.is-active span{ background:rgba(255,255,255,.16); color:#EDE9FB; }
/* ---- Filter / sort bar ---- */
.yg-shopbar{
display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px;
padding:14px 16px; margin-bottom:18px;
background:var(--yg-card); border:1px solid var(--yg-border); border-radius:var(--yg-r-md);
}
.yg-shopbar__count{ font-family:'Manrope',sans-serif; font-weight:800; font-size:13px; color:var(--yg-secondary); margin-right:auto; }
.yg-shopbar__count span{ font-weight:600; color:var(--yg-muted); }
.yg-shopbar__fs{ display:flex; flex-wrap:wrap; gap:10px; }
.yg-shopbar__f{ display:inline-flex; flex-direction:column; gap:3px; }
.yg-shopbar__f > span{
font-family:'Manrope',sans-serif; font-size:9.5px; font-weight:800; letter-spacing:.06em;
text-transform:uppercase; color:var(--yg-muted);
}
.yg-shopbar__f select{
font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:600; color:var(--yg-secondary);
background:var(--yg-bg); border:1px solid var(--yg-border); border-radius:var(--yg-r-sm);
padding:7px 26px 7px 10px; cursor:pointer;
appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2314102B' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 9px center;
}
.yg-shopbar__clear{
font-family:'Manrope',sans-serif; font-weight:800; font-size:11.5px; letter-spacing:.04em;
text-transform:uppercase; color:var(--yg-primary-hover); text-decoration:none;
}
/* ---- Product grid: 3 per row desktop, larger than coupon cards ---- */
.yg-shop-grid{ display:grid; grid-template-columns:1fr; gap:var(--gap,14px); }
@media (min-width:560px){ .yg-shop-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:980px){ .yg-shop-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; } }
.yg-shop-grid--lg{ }
@media (min-width:980px){ .yg-shop-grid--lg{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.yg-shop-card{
display:flex; flex-direction:column; min-width:0; overflow:hidden;
background:var(--yg-card); border:1px solid var(--yg-border);
border-radius:var(--yg-card-r,14px); box-shadow:var(--yg-sh-sm);
transition:box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
.yg-shop-card:hover{ box-shadow:var(--yg-sh-md); border-color:#DAD3F0; transform:translateY(-2px); }
.yg-shop-card__media{
position:relative; display:flex; align-items:center; justify-content:center;
aspect-ratio:4 / 3; padding:16px; overflow:hidden;
/* was 1/1 on the base card, 4/3 only on --lg — unified to one consistent,
shorter-than-square ratio across every product card (both variants),
and a touch less tall than a full square so the image area reads as
a more balanced, premium proportion rather than dominating the card. */
background:
radial-gradient(120% 120% at 0% 0%, #F1EDFF 0%, rgba(255,255,255,0) 48%),
radial-gradient(130% 140% at 100% 100%, #FFF1E4 0%, rgba(255,255,255,0) 46%),
#fff;
}
.yg-shop-card__media img{
position:absolute; inset:16px; width:calc(100% - 32px); height:calc(100% - 32px);
/* was width/height:100% (in-flow) — that combination, on an element
that is ITSELF a flex item sized by `aspect-ratio` (this card is a
column flex with a sibling `.yg-shop-card__body{flex:1}`), creates a
circular sizing dependency: the container's height should come FROM
aspect-ratio(width), but a normal-flow child asking for height:100%
needs that same height resolved FIRST. Confirmed live (isolated
test, reproduced then fixed) that browsers cannot resolve this and
silently fall back to a square box — the actual, measured cause of
both the oversized product images and the cropped Get Deals images
below. Taking the ![]()
out of normal flow via position:absolute
removes it from that circular calculation entirely, so the parent's
aspect-ratio applies correctly — same proven technique this file
already uses for the identical class of problem elsewhere (see
.yg-store__offerlist .deal_img_wrap img). overflow:hidden on the
parent (above) is a defensive backstop, not load-bearing once this
is fixed. */
object-fit:contain; mix-blend-mode:multiply;
}
.yg-shop-card__off{
position:absolute; top:10px; left:10px;
font-family:'Manrope',sans-serif; font-weight:800; font-size:10.5px; letter-spacing:.03em;
color:#fff; background:var(--yg-secondary); padding:3px 8px; border-radius:var(--yg-r-pill);
}
.yg-shop-card__body{ display:flex; flex-direction:column; gap:5px; padding:14px 14px 15px; flex:1; }
.yg-shop-card__brand{
font-family:'Manrope',sans-serif; font-size:10px; font-weight:800; letter-spacing:.06em;
text-transform:uppercase; color:var(--yg-primary-hover);
}
.yg-shop-card__title{
margin:0 0 2px; font-family:'Manrope',sans-serif; font-weight:700; font-size:13.5px; line-height:1.4;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.yg-shop-card--lg .yg-shop-card__title{ font-size:14.5px; -webkit-line-clamp:2; }
.yg-shop-card__title a{ color:var(--yg-secondary); text-decoration:none; }
.yg-shop-card__title a:hover{ color:var(--yg-primary-hover); }
.yg-shop-card__price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; margin-top:2px; }
.yg-shop-card__now{ font-family:'Manrope',sans-serif; font-weight:800; font-size:16px; color:var(--yg-secondary); }
.yg-shop-card--lg .yg-shop-card__now{ font-size:18px; }
.yg-shop-card__mrp{ font-size:12px; color:var(--yg-muted); text-decoration:line-through; }
.yg-shop-card__save{ font-family:'Manrope',sans-serif; font-size:11px; font-weight:800; color:var(--yg-success); }
.yg-shop-card__cta{
margin-top:auto; align-self:stretch; text-align:center;
display:inline-flex; align-items:center; justify-content:center;
background:var(--yg-primary); color:var(--yg-secondary) !important;
border:1px solid var(--yg-primary-hover); border-radius:var(--yg-r-sm);
font-family:'Manrope',sans-serif; font-weight:800; font-size:12px; letter-spacing:.05em;
padding:10px 12px; text-decoration:none;
transition:background .15s ease, transform .15s ease;
}
.yg-shop-card__body > .yg-shop-card__price{ margin-bottom:12px; }
.yg-shop-card__cta:hover{ background:var(--yg-primary-hover); transform:translateY(-1px); }
.yg-shop-more__act{ display:flex; justify-content:center; margin-top:22px; }
/* ---- Get Deals lane (offer, not product — its own compact carousel) ---- */
.yg-getdeals .yg-carousel__track{ display:flex; flex-wrap:nowrap; gap:14px; padding:2px 0; }
.yg-getdeal{
flex:0 0 62%; max-width:230px; display:flex; flex-direction:column; overflow:hidden;
scroll-snap-align:start;
background:var(--yg-card); border:1px solid var(--yg-border);
border-radius:var(--yg-card-r,14px); box-shadow:var(--yg-sh-sm);
}
.yg-getdeal__media{
position:relative; display:flex; align-items:center; justify-content:center;
aspect-ratio:16 / 10; padding:12px; overflow:hidden; background:#fff;
}
.yg-getdeal__media img{
position:absolute; inset:12px; width:calc(100% - 24px); height:calc(100% - 24px);
/* same fix and same root cause as .yg-shop-card__media above — this
media box is ALSO a column-flex item (.yg-getdeal is display:flex;
flex-direction:column) sized by aspect-ratio, so an in-flow
height:100% ![]()
here hit the identical circular-sizing bug. That
is the actual, confirmed cause of Get Deals images rendering
cropped/cut off (the resulting square box overflowed this element's
intended 16:10 frame and was then clipped unevenly by the outer
.yg-getdeal card's own overflow:hidden). Fixed the same way: the
![]()
is taken out of normal flow via position:absolute. */
object-fit:contain; mix-blend-mode:multiply;
}
.yg-getdeal__ph{ color:var(--yg-primary); opacity:.4; }
.yg-getdeal__ph svg{ width:26px; height:26px; }
.yg-getdeal__hint{
position:absolute; top:8px; left:8px;
font-family:'Manrope',sans-serif; font-weight:800; font-size:10px; letter-spacing:.02em;
color:var(--yg-secondary); background:var(--yg-primary);
padding:3px 8px; border-radius:var(--yg-r-pill); max-width:calc(100% - 16px);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.yg-getdeal__body{ display:flex; flex-direction:column; gap:5px; padding:12px 12px 13px; flex:1; }
.yg-getdeal__store{
font-family:'Manrope',sans-serif; font-size:9.5px; font-weight:800; letter-spacing:.06em;
text-transform:uppercase; color:var(--yg-primary-hover);
}
.yg-getdeal__title{
margin:0; font-family:'Manrope',sans-serif; font-weight:700; font-size:12.5px; line-height:1.4;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.yg-getdeal__title a{ color:var(--yg-secondary); text-decoration:none; }
.yg-getdeal__cta{
margin-top:auto; align-self:flex-start;
display:inline-flex; align-items:center; gap:5px;
font-family:'Manrope',sans-serif; font-weight:800; font-size:11px; letter-spacing:.04em;
color:var(--yg-primary-hover); text-decoration:none; padding-top:6px;
}
@media (min-width:640px){ .yg-getdeal{ flex-basis:38%; } }
@media (min-width:980px){ .yg-getdeal{ flex-basis:22%; max-width:none; } }
/* ---- Mobile ---- */
@media (max-width:560px){
.yg-shopsearch{ flex-wrap:wrap; border-radius:var(--yg-r-md); padding:10px; }
.yg-shopsearch input{ flex:1 1 100%; padding:6px 4px; }
.yg-shopsearch .yg-btn{ flex:1 1 100%; border-radius:var(--yg-r-sm); }
.yg-shopbar{ gap:10px 12px; }
.yg-shopbar__count{ flex:1 1 100%; margin-right:0; }
.yg-shopbar__fs{ width:100%; }
.yg-shopbar__f{ flex:1 1 45%; }
.yg-shopbar__f select{ width:100%; }
}
/* ---- Header: "Shopping" gets a bag icon in the MOBILE off-canvas menu ---- */
#slide-menu-mobile .menu-item.yg-nav-shopping > a::before,
.rh-mobile-nav .yg-nav-shopping > a::before,
.mobile-menu .yg-nav-shopping > a::before{
content:""; display:inline-block; vertical-align:-2px;
width:16px; height:16px; margin-right:9px;
background:currentColor;
-webkit-mask:no-repeat center / contain; mask:no-repeat center / contain;
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}
/* ---------- 20. utilities ---------- */
.yg-i{ display:inline-block; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.yg-visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.yg-stack{ display:flex; flex-direction:column; }
.yg-mt-sp{ margin-top:var(--yg-space); }