/* Cashback Tracker frontend styles.
   Two rules hold everywhere in this file:
   1. No font-family. The theme owns typeface; this file owns size, weight,
      leading and colour.
   2. No fixed container width. A width in pixels here competes with the
      theme's own container and one of them loses on every install. */

/* One palette, defined once. --cbtrkr-accent is not here: it is attached to
   the stylesheet handle as an inline style in Plugin::registerAssets(), from
   the main_color setting. Everything is prefixed --cbtrkr-, so a theme cannot
   collide with it by accident.

   On :root rather than on a wrapper class, because a coupon card rendered by
   [cashback-coupons] on an ordinary page is inside no wrapper of ours at all
   and used to inherit none of this. */
:root{
    --cbtrkr-ink: #16181d;
    --cbtrkr-ink-2: #4b5563;
    --cbtrkr-muted: #7b8492;
    --cbtrkr-border: #e7e9ec;
    --cbtrkr-surface: #fff;
    --cbtrkr-surface-2: #f7f8fa;
    --cbtrkr-radius: 12px;
    --cbtrkr-radius-sm: 8px;
    --cbtrkr-shadow: 0 1px 2px rgba(16,24,40,.04);
}

/* --- Shared ---------------------------------------------------------------- */
.cbtrkr_center_inside{align-items: center; display: flex; justify-content: center; margin: 0 auto}
.cbtrkr_merchants_wrap, .cbtrkr_alphabet_wrap{margin-bottom: 25px}
.cbtrkr_widget *{box-sizing: border-box}
.cbtrkr_emptyheight{height: 0}

/* --- Alphabet listing ([cashback-shops type="alphabet"]) ------------------- */
.cbtrkr_alpha_head{background: #F4F2EF; padding: 15px; margin-bottom: 15px}
.cbtrkr_list_inline span{display: inline-block; margin: 0; padding: 0 5px; text-decoration: none; font-size: 18px; cursor: pointer}
.cbtrkr_alpha_letter{border-bottom: 1px solid #eee; margin: 20px 0; padding-bottom: 10px}
.cbtrkr_letter_tag{font-weight: bold; font-size: 18px; line-height: 20px}
.cbtrkr_return{float: right; cursor: pointer; background-color: var(--cbtrkr-accent, #FB7F36)}
.cbtrkr_alpha_letter .cbtrkr_return span{color: #fff; width: 18px; height: 18px; display: inline-block; text-align: center; line-height: 18px}

/* --- Shop directory (3a) --------------------------------------------------- */
.cbtrkr_shop_directory{margin: 0 auto; padding: 15px; max-width: 1200px; width: 100%; clear: both}
.cbtrkr_shop_directory *{-webkit-box-sizing: border-box; box-sizing: border-box}
.cbtrkr_shop_directory_header{margin-bottom: 20px}
.cbtrkr_shop_directory_title{margin: 0 0 6px}
.cbtrkr_shop_directory_count{color: #999; font-size: 13px; margin-bottom: 10px}
.cbtrkr_shop_directory_description{color: #666; font-size: 14px; line-height: 22px}

.cbtrkr_shop_filters{background: #F4F2EF; padding: 15px; border-radius: 3px; margin-bottom: 25px}
.cbtrkr_shop_categories_wrap{margin-bottom: 15px}
.cbtrkr_shop_categories{display: flex; flex-wrap: wrap; gap: 8px}
/* Two chip rows: 30px chip (18px line-height + 2x5px padding + 2x1px border)
   + 8px gap + 30px. The arithmetic is spelled out because a change to the chip
   below silently turns this into a one-and-a-half row clip, which reads as a
   rendering bug rather than as a setting. Applied by script only - with no
   JavaScript the row stays full, which is what it has always done. */
.cbtrkr_shop_categories.cbtrkr_is_collapsed{max-height: 68px; overflow: hidden}
.cbtrkr_shop_categories_toggle{margin-top: 8px; padding: 5px 14px; border: 1px dashed var(--cbtrkr-border); border-radius: 30px; background: transparent; color: var(--cbtrkr-muted); font-size: 13px; line-height: 18px; cursor: pointer}
/* :focus repaints background too. A theme's own `button:focus` otherwise
   fills this one solid the moment it is clicked - which is every time, since
   clicking is the only way to use it. The outline is left to the browser, so
   keyboard focus stays visible. */
.cbtrkr_shop_categories_toggle:hover, .cbtrkr_shop_categories_toggle:focus{background: transparent; border-color: var(--cbtrkr-accent, #FB7F36); color: var(--cbtrkr-accent, #FB7F36)}
a.cbtrkr_shop_category{display: inline-block; padding: 5px 14px; background: #fff; border: 1px solid #e4e4e4; border-radius: 30px; color: #333; font-size: 13px; line-height: 18px; text-decoration: none; transition: all .2s ease-out}
a.cbtrkr_shop_category:hover{border-color: var(--cbtrkr-accent, #FB7F36); color: var(--cbtrkr-accent, #FB7F36)}
a.cbtrkr_shop_category.cbtrkr_is_current, a.cbtrkr_shop_category.cbtrkr_is_current:hover{background: var(--cbtrkr-accent, #FB7F36); border-color: var(--cbtrkr-accent, #FB7F36); color: #fff}

.cbtrkr_shop_filters_row{display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 15px}
.cbtrkr_shop_search{position: relative; display: flex; gap: 6px; flex: 1 1 320px; max-width: 460px; margin: 0}
.cbtrkr_shop_search_input{flex: 1 1 auto; height: 40px; padding: 0 12px; border: 1px solid #e4e4e4; border-radius: 3px; background: #fff; font-size: 14px; margin: 0}
.cbtrkr_shop_search_input:focus{border-color: var(--cbtrkr-accent, #FB7F36); outline: none}
.cbtrkr_shop_search .cbtrkr_shop_search_submit{height: 40px; padding: 0 18px; border: 0; border-radius: 3px; background: var(--cbtrkr-accent, #FB7F36); color: #fff; font-size: 14px; cursor: pointer; margin: 0}
.cbtrkr_shop_search .cbtrkr_shop_search_submit:hover{filter: brightness(.92)}
.cbtrkr_shop_sort{margin: 0}
.cbtrkr_shop_sort select{height: 40px; padding: 0 10px; border: 1px solid #e4e4e4; border-radius: 3px; background: #fff; font-size: 14px; color: #333; margin: 0}

.cbtrkr_shop_alphabet{display: flex; flex-wrap: wrap; align-items: center; gap: 2px}
.cbtrkr_shop_letter{display: inline-block; min-width: 30px; padding: 4px 6px; border-radius: 3px; text-align: center; font-size: 14px; line-height: 20px; text-decoration: none}
a.cbtrkr_shop_letter{color: #333}
a.cbtrkr_shop_letter:hover{background: #fff; color: var(--cbtrkr-accent, #FB7F36)}
a.cbtrkr_shop_letter.cbtrkr_is_current, a.cbtrkr_shop_letter.cbtrkr_is_current:hover{background: var(--cbtrkr-accent, #FB7F36); color: #fff}
.cbtrkr_shop_letter.cbtrkr_is_empty{color: #c4c4c4; cursor: default}

.cbtrkr_shop_grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; margin-bottom: 25px}
/* The tokens, like every other card in this file. This one predated them and
   carried #f1f1f1, three separate greys, a 3px radius and a shadow of its own,
   which is why a shop tile read as a different plugin than the coupon list
   under it. Shape and structure are unchanged - only the values moved. */
a.cbtrkr_shop_card{display: flex; flex-direction: column; background: var(--cbtrkr-surface); border: 1px solid var(--cbtrkr-border); border-radius: var(--cbtrkr-radius); box-shadow: var(--cbtrkr-shadow); text-decoration: none; overflow: hidden; transition: border-color .2s ease-out, box-shadow .2s ease-out}
a.cbtrkr_shop_card:hover{border-color: var(--cbtrkr-accent, #FB7F36); box-shadow: 0 4px 14px rgba(16,24,40,.08)}
/* margin: 0 is load-bearing. The template hands this element
   cbtrkr_center_inside as well, and that class's margin: 0 auto makes it
   shrink-wrap as a flex item - 80px inside a 275px card - so the border below
   drew a stub under the logo rather than a rule across the card. Reset here
   rather than in the template, which a theme may have copied already. */
/* content-box against the directory's own `* { box-sizing: border-box }`: both
   callers mean `height` as the room for the LOGO, not as the room for the logo
   and its padding. Under border-box the block's inline height:60px left a 31px
   content area while its inline max-height:60px let the image be 60px, so the
   artwork sat edge to edge and the padding did nothing at all. */
.cbtrkr_shop_card_logo{display: flex; align-items: center; justify-content: center; box-sizing: content-box; margin: 0; height: 100px; padding: 14px; border-bottom: 1px solid var(--cbtrkr-border)}
/* max-height: 100% fills the box the card gives it instead of stopping at 60px
   inside 100px. Small source images are NOT scaled up: EaseUS looks small
   because its artwork is small, and upscaling it would only make it blurry. */
.cbtrkr_shop_card_logo img{max-height: 100%; max-width: 100%; width: auto; object-fit: contain}
.cbtrkr_shop_card_name{color: var(--cbtrkr-ink); font-size: 14px; font-weight: 600; line-height: 18px; padding: 12px 10px 0; text-align: center; transition: color .2s ease}
a.cbtrkr_shop_card:hover .cbtrkr_shop_card_name{color: var(--cbtrkr-accent, #FB7F36)}
.cbtrkr_shop_card_tagline{color: var(--cbtrkr-muted); font-size: 12px; line-height: 16px; padding: 2px 10px 0; text-align: center}
.cbtrkr_shop_card_cashback{color: var(--cbtrkr-accent, #FB7F36); font-weight: bold; font-size: 16px; line-height: 20px; padding: 8px 10px 15px; text-align: center; margin-top: auto}
.cbtrkr_shop_card_cashback_lbl{display: block; color: var(--cbtrkr-muted); font-weight: normal; font-size: 80%; line-height: 14px}
/* Same padding and margin-top as the rate it stands in for, so a coupon-site
   tile keeps the identical shape and the grid rows stay aligned. */
.cbtrkr_shop_card_coupons{color: var(--cbtrkr-accent, #FB7F36); font-weight: bold; font-size: 14px; line-height: 20px; padding: 8px 10px 15px; text-align: center; margin-top: auto}
.cbtrkr_shop_card_rating{display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px 8px}
.cbtrkr_shop_card_rating .cbtrkr_stars{width: 70px; height: 13px; -webkit-mask-size: 14px 13px; mask-size: 14px 13px}
.cbtrkr_shop_card_rating_count{font-size: 12px; color: var(--cbtrkr-muted)}

/* Compact tile (3d) */
.cbtrkr_shop_grid_compact{gap: 10px}
a.cbtrkr_shop_card_compact .cbtrkr_shop_card_logo{height: 70px; padding: 6px; border-bottom: 0}
a.cbtrkr_shop_card_compact .cbtrkr_shop_card_logo img{max-height: 46px}
/* A compact card carries the name and the rate, just smaller. There is no
   fallback rule any more: the name always renders, so a shop with no image
   shows an empty logo box rather than its domain pretending to be one. */
a.cbtrkr_shop_card_compact .cbtrkr_shop_card_name{font-size: 12.5px; line-height: 16px; padding: 8px 8px 0}
a.cbtrkr_shop_card_compact .cbtrkr_shop_card_cashback{font-size: 13px; line-height: 17px; padding: 4px 8px 10px}
a.cbtrkr_shop_card_compact .cbtrkr_shop_card_coupons{font-size: 12px; line-height: 17px; padding: 4px 8px 10px}

.cbtrkr_shop_empty{color: #666; padding: 30px 0; text-align: center}

.cbtrkr_shop_pager{display: flex; gap: 15px; align-items: center; justify-content: center; margin: 25px 0}
.cbtrkr_shop_pager a{color: #333; text-decoration: none; padding: 8px 16px; border: 1px solid #e4e4e4; border-radius: 3px}
.cbtrkr_shop_pager a:hover{border-color: var(--cbtrkr-accent, #FB7F36); color: var(--cbtrkr-accent, #FB7F36)}
.cbtrkr_shop_pager_status{color: #777; font-size: 13px}

.cbtrkr_shop_search_results{position: absolute; z-index: 20; top: 44px; left: 0; right: 0; background: #fff; border: 1px solid #e4e4e4; border-radius: 3px; box-shadow: 0 4px 14px rgba(0,0,0,.10); display: none; overflow: hidden}
.cbtrkr_shop_search_results.cbtrkr_is_open{display: block}
a.cbtrkr_shop_search_result{display: flex; gap: 10px; align-items: center; padding: 8px 12px; color: #333; font-size: 14px; text-decoration: none; border-bottom: 1px solid #f4f4f4}
a.cbtrkr_shop_search_result:last-child{border-bottom: 0}
a.cbtrkr_shop_search_result:hover{background: #f7f7f7; color: var(--cbtrkr-accent, #FB7F36)}
.cbtrkr_shop_search_result img{max-height: 24px; max-width: 48px; width: auto}
.cbtrkr_shop_search_result_cashback{margin-left: auto; color: var(--cbtrkr-accent, #FB7F36); font-weight: bold; font-size: 13px; white-space: nowrap}

/* --- Shop page (3e) --------------------------------------------------------
   Two layouts over one set of parts. Every partial emits one shape and knows
   nothing about arrangement; the difference between A and B is entirely the
   rules under .cbtrkr_shop_panel and .cbtrkr_shop_hero below. */
.cbtrkr_shop_page{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 15px;
    color: var(--cbtrkr-ink);
    clear: both;
}
.cbtrkr_shop_page *{-webkit-box-sizing: border-box; box-sizing: border-box}

.cbtrkr_shop_breadcrumb{display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 16px; font-size: 12.5px; color: var(--cbtrkr-muted)}
a.cbtrkr_shop_breadcrumb_item{color: var(--cbtrkr-muted); text-decoration: none}
a.cbtrkr_shop_breadcrumb_item:hover{color: var(--cbtrkr-accent, #FB7F36)}
.cbtrkr_shop_breadcrumb_sep{color: #b9bfc7}

.cbtrkr_shop_title{margin: 0 0 6px; line-height: 1.2; letter-spacing: -.5px}
.cbtrkr_shop_tagline{color: var(--cbtrkr-ink-2); font-size: 15px; line-height: 1.5; margin: 0 0 14px}
.cbtrkr_shop_content{font-size: 15px; line-height: 1.65; color: var(--cbtrkr-ink-2)}

.cbtrkr_shop_identity_logo{display: flex; align-items: center; justify-content: center; margin-bottom: 12px}
.cbtrkr_shop_identity_img{max-height: 48px; max-width: 100%; width: auto; height: auto}
.cbtrkr_shop_identity_name{font-size: 17px; font-weight: 650; letter-spacing: -.2px}
.cbtrkr_shop_identity_rating{display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 12.5px; color: var(--cbtrkr-muted)}
.cbtrkr_shop_identity_rating_val{font-weight: 600; color: var(--cbtrkr-ink-2)}
a.cbtrkr_shop_identity_rating_count{color: var(--cbtrkr-muted); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: #c9ced6}
a.cbtrkr_shop_identity_rating_count:hover{color: var(--cbtrkr-accent, #FB7F36); text-decoration-color: currentColor}

.cbtrkr_shop_rate_value{font-weight: 800; letter-spacing: -.6px; line-height: 1.05; color: var(--cbtrkr-ink)}
.cbtrkr_shop_rate_label{font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--cbtrkr-muted); margin-top: 7px}
.cbtrkr_shop_rate_offer{font-size: 15px; font-weight: 600; line-height: 1.35}
/* _cashback_linkwise.php predates this page and is unchanged: it emits its own
   two class names for a per-category breakdown rather than one figure. */
.cbtrkr_shop_rate .cbtrkr_cashback_notice_name{font-size: 13px; color: var(--cbtrkr-muted); line-height: 1.7}
.cbtrkr_shop_rate .cbtrkr_cashback_notice_value{font-size: 15px; font-weight: 700; color: var(--cbtrkr-ink)}

a.cbtrkr_shop_cta_btn{display: inline-block; padding: 13px 26px; border-radius: var(--cbtrkr-radius-sm); background: var(--cbtrkr-accent, #FB7F36); color: #fff; font-size: 15.5px; font-weight: 650; line-height: 1.2; text-align: center; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.10)}
a.cbtrkr_shop_cta_btn:hover, a.cbtrkr_shop_cta_btn:active, a.cbtrkr_shop_cta_btn:focus{color: #fff; filter: brightness(.94)}

.cbtrkr_shop_facts{margin: 0; padding: 0}
.cbtrkr_shop_facts_row{display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--cbtrkr-border); font-size: 13px}
.cbtrkr_shop_facts_row:last-child{border-bottom: 0}
.cbtrkr_shop_facts_label{margin: 0; color: var(--cbtrkr-muted); font-weight: 400}
.cbtrkr_shop_facts_value{margin: 0; text-align: right; color: var(--cbtrkr-ink-2); font-weight: 550}
.cbtrkr_shop_facts_value a{color: var(--cbtrkr-ink-2); text-decoration: none}
.cbtrkr_shop_facts_value a:hover{color: var(--cbtrkr-accent, #FB7F36)}

.cbtrkr_shop_how{border: 1px solid var(--cbtrkr-border); border-radius: var(--cbtrkr-radius); padding: 16px 18px; margin-top: 14px}
.cbtrkr_shop_how_title{font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cbtrkr-muted); margin-bottom: 10px}
.cbtrkr_shop_how_steps{margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--cbtrkr-ink-2)}
.cbtrkr_shop_how_step{margin: 0 0 6px}
.cbtrkr_shop_how_step:last-child{margin-bottom: 0}

/* Reuses the facts rows wholesale; only the card and its heading are new. */
.cbtrkr_shop_stats{border: 1px solid var(--cbtrkr-border); border-radius: var(--cbtrkr-radius); padding: 14px 18px 6px; margin-top: 14px}
.cbtrkr_shop_stats_title{font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cbtrkr-muted); margin-bottom: 4px}
.cbtrkr_shop_stats .cbtrkr_shop_facts_row:last-child{border-bottom: 0}

.cbtrkr_shop_trust{list-style: none; margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--cbtrkr-border); border-radius: var(--cbtrkr-radius); background: var(--cbtrkr-surface-2)}
.cbtrkr_shop_trust_item{font-size: 12.5px; line-height: 1.5; color: var(--cbtrkr-ink-2); padding: 3px 0}

.cbtrkr_shop_terms{margin: 24px 0}
.cbtrkr_shop_terms_block{border: 1px solid var(--cbtrkr-border); border-radius: var(--cbtrkr-radius); margin-bottom: 9px; background: var(--cbtrkr-surface)}
.cbtrkr_shop_terms_summary{padding: 14px 17px; cursor: pointer; font-size: 14.5px; font-weight: 600; list-style: none; position: relative; padding-right: 40px}
.cbtrkr_shop_terms_summary::-webkit-details-marker{display: none}
.cbtrkr_shop_terms_summary:after{content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-right: 2px solid var(--cbtrkr-muted); border-bottom: 2px solid var(--cbtrkr-muted); transform: rotate(45deg); transition: transform .18s ease}
.cbtrkr_shop_terms_block[open] .cbtrkr_shop_terms_summary:after{transform: rotate(-135deg); margin-top: -2px}
.cbtrkr_shop_terms_body{padding: 0 17px 15px; font-size: 14px; line-height: 1.6; color: var(--cbtrkr-ink-2)}
.cbtrkr_shop_terms_body p{margin: 0 0 10px}
.cbtrkr_shop_terms_body p:last-child{margin-bottom: 0}

.cbtrkr_shop_custom{margin-top: 14px; font-size: 13px; color: var(--cbtrkr-ink-2)}

.cbtrkr_shop_related{margin-top: 8px; padding-top: 26px; border-top: 1px solid var(--cbtrkr-border)}
.cbtrkr_shop_related_title{margin: 0 0 14px; font-size: 17px; font-weight: 650; letter-spacing: -.3px}

/* The mobile action bar. display:none in the base rules on purpose - without
   it every desktop visitor gets a second button pinned over the page. */
.cbtrkr_shop_actionbar{display: none}

/* Layout A: the offer as a card in a column beside the content. */
.cbtrkr_shop_panel .cbtrkr_shop_columns{display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 32px; align-items: start}
.cbtrkr_shop_panel .cbtrkr_shop_aside{position: sticky; top: 20px}
.cbtrkr_shop_panel .cbtrkr_shop_offer{border: 1px solid var(--cbtrkr-border); border-radius: var(--cbtrkr-radius); background: var(--cbtrkr-surface); box-shadow: var(--cbtrkr-shadow); padding: 22px 20px 6px; text-align: center}
.cbtrkr_shop_panel .cbtrkr_shop_identity{padding-bottom: 18px; border-bottom: 1px solid var(--cbtrkr-border)}
.cbtrkr_shop_panel .cbtrkr_shop_identity_rating{justify-content: center}
.cbtrkr_shop_panel .cbtrkr_shop_rate{padding: 20px 0}
.cbtrkr_shop_panel .cbtrkr_shop_rate_value{font-size: 28px}
.cbtrkr_shop_panel .cbtrkr_shop_cta{padding-bottom: 4px}
.cbtrkr_shop_panel a.cbtrkr_shop_cta_btn{display: block; width: 100%}
.cbtrkr_shop_panel .cbtrkr_shop_facts{border-top: 1px solid var(--cbtrkr-border); margin-top: 16px; padding-top: 4px; text-align: left}
.cbtrkr_shop_panel .cbtrkr_shop_title{font-size: 28px; font-weight: 700}

/* Layout B: the offer as a band across the top, content left, rail right. */
.cbtrkr_shop_hero .cbtrkr_shop_offer{display: flex; align-items: center; gap: 26px; border: 1px solid var(--cbtrkr-border); border-radius: 14px; background: var(--cbtrkr-surface); box-shadow: var(--cbtrkr-shadow); padding: 24px 26px; margin-bottom: 30px}
.cbtrkr_shop_hero .cbtrkr_shop_identity{flex: 0 0 auto; text-align: center}
.cbtrkr_shop_hero .cbtrkr_shop_identity_name{font-size: 14px; color: var(--cbtrkr-muted)}
.cbtrkr_shop_hero .cbtrkr_shop_offer_head{flex: 1 1 auto; min-width: 0}
.cbtrkr_shop_hero .cbtrkr_shop_title{font-size: 26px; font-weight: 700; margin-bottom: 5px}
.cbtrkr_shop_hero .cbtrkr_shop_tagline{margin-bottom: 0}
.cbtrkr_shop_hero .cbtrkr_shop_offer_action{flex: 0 0 auto; display: flex; align-items: center; gap: 24px; border-left: 1px solid var(--cbtrkr-border); padding-left: 26px}
.cbtrkr_shop_hero .cbtrkr_shop_rate{text-align: right}
.cbtrkr_shop_hero .cbtrkr_shop_rate_value{font-size: 26px}
.cbtrkr_shop_hero .cbtrkr_shop_columns{display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start}
.cbtrkr_shop_hero .cbtrkr_shop_facts{border: 1px solid var(--cbtrkr-border); border-radius: var(--cbtrkr-radius); padding: 4px 16px; margin-top: 14px}
.cbtrkr_shop_hero .cbtrkr_shop_terms{margin: 14px 0 0}
.cbtrkr_shop_hero .cbtrkr_shop_related{margin-top: 22px; padding-top: 18px}
.cbtrkr_shop_hero .cbtrkr_shop_related_title{font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cbtrkr-muted)}

/* --- Coupons (3e) ----------------------------------------------------------
   A row: discount rail, body, action. A CODE carries the dashed divider and a
   solid button; a DEAL has neither. One class apart, not two layouts.

   The rail is reserved or dropped for the whole list at once - a card cannot
   decide it, because the answer depends on its neighbours. */
.cbtrkr_coupon_list{display: flex; flex-direction: column; gap: 12px; margin: 20px 0}
.cbtrkr_coupon_list *{-webkit-box-sizing: border-box; box-sizing: border-box}
/* The reveal row, the copied marker and the vote row are all toggled with the
   `hidden` attribute, and the browser implements that in its user-agent
   stylesheet - which any author `display` rule below outranks. Without this
   every one of them shows from page load. */
.cbtrkr_coupon_list [hidden]{display: none}

.cbtrkr_coupon_list_header{font-size: 12.5px; color: var(--cbtrkr-muted); margin-bottom: 2px}
.cbtrkr_coupon_list_sep{margin: 0 2px; color: #c9ced6}

.cbtrkr_coupon_card{border: 1px solid var(--cbtrkr-border); border-radius: var(--cbtrkr-radius); background: var(--cbtrkr-surface)}
.cbtrkr_coupon_card_main{display: flex; align-items: center; gap: 18px; padding: 16px 18px}

/* min-height keeps a reserved-but-empty rail occupying its column. */
.cbtrkr_coupon_card_discount{flex: 0 0 84px; min-height: 1px; text-align: center; font-weight: 800; font-size: 25px; letter-spacing: -1px; line-height: 1.1; color: var(--cbtrkr-accent, #FB7F36); overflow-wrap: anywhere}
.cbtrkr_coupon_card_code .cbtrkr_coupon_card_discount{border-right: 2px dashed #e6d6c6; padding-right: 18px}

/* A discount reported as money rather than a percentage - "20 000 S/" - is
   three times the width of "20%" and broke at every space, stacking into a
   rail taller than the card. The length is measured server-side; see
   CouponList::discountSize(). Steps, not a formula: the card sets no
   font-family, so the theme picks the face and no arithmetic here is safe.

   POSITION IS LOAD-BEARING. These sit above the compact and mobile rules on
   purpose. Both of those lay the rail out as a full-width line rather than an
   84px column, where "20 000 S/" fits on one line and shrinking it would just
   make it small for no reason. Compact outranks these on specificity and the
   media query wins on order, so each keeps its own size and the steps apply
   only to the wide layout that actually has the problem. Moving this block
   below either one silently shrinks both. */
.cbtrkr_coupon_card_discount_md{font-size: 19px; letter-spacing: -.5px}
.cbtrkr_coupon_card_discount_sm{font-size: 15px; letter-spacing: -.3px}

/* The rail with nothing to put in it. Reserved so a mixed list keeps one left
   edge - see CouponList::hasAnyDiscount() - but 84px of blank reads as a
   broken image, so the card names the space instead. Deliberately quiet: this
   is a label, not a value, and must not compete with the real discounts
   beside it. Overridden again under .cbtrkr_coupon_list_compact and in the
   900px query, both of which re-set font-size on the rail. */
.cbtrkr_coupon_card_discount_empty{font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cbtrkr-muted)}

.cbtrkr_coupon_card_body{flex: 1 1 auto; min-width: 0}
.cbtrkr_coupon_card_title{font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--cbtrkr-ink)}
.cbtrkr_coupon_card_meta{margin-top: 7px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 12px; color: var(--cbtrkr-muted)}
.cbtrkr_coupon_ends{color: #b45309; font-weight: 600}
.cbtrkr_coupon_rate{color: #12805c; font-weight: 600}
.cbtrkr_coupon_expired_tag{padding: 1px 8px; border-radius: 20px; background: var(--cbtrkr-surface-2); border: 1px solid var(--cbtrkr-border); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em}

/* The same disclosure as .cbtrkr_shop_terms_summary, at list scale. */
.cbtrkr_coupon_details{margin-top: 8px}
.cbtrkr_coupon_details_summary{display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 12.5px; color: var(--cbtrkr-muted)}
.cbtrkr_coupon_details_summary::-webkit-details-marker{display: none}
.cbtrkr_coupon_details_summary:after{content: ""; width: 5px; height: 5px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .18s ease}
.cbtrkr_coupon_details[open] .cbtrkr_coupon_details_summary:after{transform: rotate(-135deg); margin-top: 1px}
.cbtrkr_coupon_details_body{margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--cbtrkr-ink-2)}

.cbtrkr_coupon_card_action{flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; min-width: 170px}
.cbtrkr_coupon_btn{display: inline-block; width: 100%; padding: 11px 20px; border: 0; border-radius: var(--cbtrkr-radius-sm); background: var(--cbtrkr-accent, #FB7F36); color: #fff; font-size: 13.5px; font-weight: 650; line-height: 20px; text-align: center; text-decoration: none; letter-spacing: .02em; cursor: pointer}
.cbtrkr_coupon_btn:hover, .cbtrkr_coupon_btn:focus{filter: brightness(.92); color: #fff}
/* Both buttons are the same. An earlier version outlined the deal button to
   mark it as the quieter offer - but at 1px in --cbtrkr-border it read as a
   DISABLED control, and the ranking was wrong anyway: free shipping applied
   automatically often beats a code you have to paste. Which card is which is
   already said twice, by the button's own label and by the dashed rail beside
   a code's discount. Colour does not need to say it a third time, and cannot
   say it without also claiming one is worth less. */

.cbtrkr_coupon_revealed{display: flex; align-items: stretch; gap: 6px}
.cbtrkr_coupon_code{flex: 1 1 auto; padding: 9px 10px; border: 2px dashed var(--cbtrkr-accent, #FB7F36); border-radius: var(--cbtrkr-radius-sm); font-weight: 700; font-size: 14px; letter-spacing: 1px; line-height: 20px; text-align: center; color: var(--cbtrkr-ink); word-break: break-all; background: #fffdf9}
.cbtrkr_coupon_copied{flex: 0 0 auto; display: flex; align-items: center; padding: 0 11px; border: 1px solid #bfe3d2; border-radius: var(--cbtrkr-radius-sm); background: #eef8f3; color: #12805c; font-size: 11.5px; font-weight: 650}
.cbtrkr_coupon_opened{font-size: 11.5px; color: var(--cbtrkr-muted); text-align: center}

.cbtrkr_coupon_card_votes{display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--cbtrkr-border); font-size: 12px; color: var(--cbtrkr-muted)}
.cbtrkr_coupon_vote{padding: 4px 12px; border: 1px solid var(--cbtrkr-border); border-radius: 6px; background: var(--cbtrkr-surface); color: var(--cbtrkr-ink-2); font-size: 12px; line-height: 18px; cursor: pointer}
.cbtrkr_coupon_vote:hover{border-color: var(--cbtrkr-accent, #FB7F36); color: var(--cbtrkr-accent, #FB7F36)}
.cbtrkr_coupon_vote:disabled, .cbtrkr_coupon_vote:disabled:hover{opacity: .5; border-color: var(--cbtrkr-border); color: var(--cbtrkr-ink-2); cursor: default}

/* Demo mode. A native <dialog>, so `open` is the browser's own state and
   nothing here has to hide it. */
.cbtrkr_demo_modal{width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--cbtrkr-border); border-radius: var(--cbtrkr-radius-sm); background: var(--cbtrkr-surface); color: var(--cbtrkr-ink); box-shadow: 0 12px 40px rgba(0,0,0,.18)}
.cbtrkr_demo_modal::backdrop{background: rgba(15,23,42,.55)}
.cbtrkr_demo_modal_body{padding: 24px}
.cbtrkr_demo_modal_title{margin: 0 0 10px; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--cbtrkr-ink)}
.cbtrkr_demo_modal_text{font-size: 14px; line-height: 1.6; color: var(--cbtrkr-ink-2)}
.cbtrkr_demo_modal_actions{display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px}
.cbtrkr_demo_modal_cta{display: inline-block; padding: 10px 18px; border-radius: var(--cbtrkr-radius-sm); background: var(--cbtrkr-accent, #FB7F36); color: #fff; font-size: 13.5px; font-weight: 650; text-decoration: none}
.cbtrkr_demo_modal_cta:hover, .cbtrkr_demo_modal_cta:focus{filter: brightness(.92); color: #fff}
.cbtrkr_demo_modal_close{padding: 10px 14px; border: 1px solid var(--cbtrkr-border); border-radius: var(--cbtrkr-radius-sm); background: var(--cbtrkr-surface); color: var(--cbtrkr-ink-2); font-size: 13px; cursor: pointer}
.cbtrkr_demo_modal_close:hover{border-color: var(--cbtrkr-accent, #FB7F36); color: var(--cbtrkr-accent, #FB7F36)}

/* A past offer never wears the accent colour. */
.cbtrkr_coupon_card_expired{opacity: .62}
.cbtrkr_coupon_card_expired .cbtrkr_coupon_card_discount{color: var(--cbtrkr-muted); border-right-color: var(--cbtrkr-border)}
.cbtrkr_coupon_code_past{border-style: dashed; border-color: var(--cbtrkr-border); background: var(--cbtrkr-surface-2); color: var(--cbtrkr-ink-2)}

.cbtrkr_coupon_expired_section{margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cbtrkr-border)}
.cbtrkr_coupon_expired_summary{display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 12.5px; color: var(--cbtrkr-muted)}
.cbtrkr_coupon_expired_summary::-webkit-details-marker{display: none}
.cbtrkr_coupon_expired_summary:after{content: ""; width: 5px; height: 5px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .18s ease}
.cbtrkr_coupon_expired_section[open] .cbtrkr_coupon_expired_summary:after{transform: rotate(-135deg); margin-top: 1px}
.cbtrkr_coupon_expired_body{display: flex; flex-direction: column; gap: 10px; margin-top: 12px}

.cbtrkr_coupon_list_compact .cbtrkr_coupon_card_main{flex-direction: column; align-items: stretch; gap: 10px; padding: 12px}
.cbtrkr_coupon_list_compact .cbtrkr_coupon_card_discount{flex: 0 0 auto; min-width: 0; text-align: left; font-size: 22px; border-right: 0; padding-right: 0}
.cbtrkr_coupon_list_compact .cbtrkr_coupon_card_discount_empty{font-size: 12px}
.cbtrkr_coupon_list_compact .cbtrkr_coupon_card_title{font-size: 14px; line-height: 20px}
.cbtrkr_coupon_list_compact .cbtrkr_coupon_card_action{min-width: 0}

/* --- Reviews (3c) ---------------------------------------------------------- */
/* One star, as a path rather than a font glyph: no dependency on the theme's
   font having a star, and no chance of an emoji presentation. */
:root{--cbtrkr-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='M10 0l3.09 6.26L20 7.27l-5 4.87 1.18 6.88L10 15.77l-6.18 3.25L5 12.14 0 7.27l6.91-1.01z'/%3E%3C/svg%3E")}
.cbtrkr_reviews{margin: 30px 0; scroll-margin-top: 24px}
.cbtrkr_reviews *{-webkit-box-sizing: border-box; box-sizing: border-box}
.cbtrkr_reviews_title{margin: 0 0 14px; font-size: 20px; line-height: 26px}
.cbtrkr_reviews_summary{display: flex; align-items: center; gap: 10px; margin-bottom: 18px}
.cbtrkr_reviews_avg{font-size: 28px; font-weight: bold; line-height: 1; color: #222}
.cbtrkr_reviews_count{font-size: 13px; color: #777}

/* A row of five stars with a partial fill: the grey row is the track, the
   coloured child is clipped to the score. */
.cbtrkr_stars{position: relative; display: inline-block; width: 90px; height: 17px; background: #dcdcdc; -webkit-mask-image: var(--cbtrkr-star, none); mask-image: var(--cbtrkr-star, none); -webkit-mask-size: 18px 17px; mask-size: 18px 17px; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x}
.cbtrkr_stars_on{position: absolute; top: 0; left: 0; height: 100%; background: var(--cbtrkr-accent, #FB7F36)}

.cbtrkr_review{padding: 14px 0; border-top: 1px solid #f0f0f0}
.cbtrkr_review_head{display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13px}
.cbtrkr_review_author{font-weight: 600; color: #222}
.cbtrkr_review_verified{padding: 2px 8px; border-radius: 10px; background: #eef7ee; color: #2e7d32; font-size: 11px; font-weight: 600}
.cbtrkr_review_date{margin-left: auto; color: #999}
.cbtrkr_review_text{margin-top: 6px; font-size: 14px; line-height: 21px; color: #444; white-space: pre-line}
.cbtrkr_review_own{padding: 12px 14px; border: 1px solid #eee; border-radius: 4px; background: #fafafa; margin-bottom: 16px}
.cbtrkr_review_own .cbtrkr_review{border-top: 0; padding-top: 6px}
.cbtrkr_review_own_title{font-size: 12px; font-weight: 600; color: #777; text-transform: uppercase; letter-spacing: .04em}
.cbtrkr_review_pending{margin-top: 6px; font-size: 12px; color: #b26a00}
.cbtrkr_review_signin, .cbtrkr_review_closed{padding: 12px 14px; border: 1px dashed #ddd; border-radius: 4px; font-size: 14px; color: #555}

.cbtrkr_review_form{padding: 16px; border: 1px solid #eee; border-radius: 4px; margin-bottom: 18px}
.cbtrkr_review_form textarea{width: 100%; margin: 14px 0 12px; padding: 10px; border: 1px solid #ddd; border-radius: 3px; font-size: 14px; line-height: 20px}
.cbtrkr_review_form textarea:focus{border-color: var(--cbtrkr-accent, #FB7F36); outline: none}
.cbtrkr_review_rating{border: 0; padding: 0; margin: 0; min-width: 0}
.cbtrkr_review_rating_label{display: block; float: none; width: auto; padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #444}
/* Reversed, so `label:hover ~ label` reaches the stars to its left. */
.cbtrkr_review_stars{display: inline-flex; flex-direction: row-reverse; justify-content: flex-end}
.cbtrkr_review_stars input{position: absolute; width: 1px; height: 1px; opacity: 0}
/* Not left to the theme: an undefined .screen-reader-text would print the label
   text inside the star, where the mask clips it into nonsense. */
.cbtrkr_reviews .screen-reader-text{position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px}
.cbtrkr_review_stars label{width: 30px; height: 28px; margin: 0; cursor: pointer; background: #dcdcdc; -webkit-mask-image: var(--cbtrkr-star, none); mask-image: var(--cbtrkr-star, none); -webkit-mask-size: 28px 27px; mask-size: 28px 27px; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: background .12s ease}
.cbtrkr_review_stars input:checked ~ label, .cbtrkr_review_stars label:hover, .cbtrkr_review_stars label:hover ~ label{background: var(--cbtrkr-accent, #FB7F36)}
.cbtrkr_review_stars input:focus-visible + label{outline: 2px solid var(--cbtrkr-accent, #FB7F36); outline-offset: 3px}
.cbtrkr_review_submit{padding: 10px 18px; border: 0; border-radius: 3px; background: var(--cbtrkr-accent, #FB7F36); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer}
.cbtrkr_review_submit:hover{filter: brightness(.92)}
.cbtrkr_reviews_legacy_title{margin: 24px 0 8px; font-size: 15px; color: #777}

/* --- WooCommerce -----------------------------------------------------------
   One rule, because there is no template of ours on a product page -
   WooTracking echoes this straight into Woo's product summary, between the
   price and the short description. Sized to sit beside them rather than
   compete with the price. */
.cbtrkr_cashback_notice_woo{display: inline-block; margin: 0 0 14px; padding: 6px 12px; border: 1px solid var(--cbtrkr-border); border-radius: var(--cbtrkr-radius-sm); background: var(--cbtrkr-surface-2); color: var(--cbtrkr-accent, #FB7F36); font-size: 13.5px; font-weight: 700; line-height: 1.3}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 900px){
    /* One column in both layouts. Source order put the aside first in the
       panel layout so it can be a sidebar on desktop; here the title has to
       lead, which is what grid ordering is for - the old float layout could
       not do this at all. */
    .cbtrkr_shop_panel .cbtrkr_shop_columns,
    .cbtrkr_shop_hero .cbtrkr_shop_columns{grid-template-columns: minmax(0, 1fr); gap: 24px}
    .cbtrkr_shop_panel .cbtrkr_shop_aside{position: static; order: 2}
    .cbtrkr_shop_panel .cbtrkr_shop_main{order: 1}

    .cbtrkr_shop_hero .cbtrkr_shop_offer{flex-direction: column; align-items: stretch; text-align: center; gap: 18px}
    .cbtrkr_shop_hero .cbtrkr_shop_offer_action{flex-direction: column; align-items: stretch; border-left: 0; border-top: 1px solid var(--cbtrkr-border); padding-left: 0; padding-top: 18px; gap: 14px}
    .cbtrkr_shop_hero .cbtrkr_shop_rate{text-align: center}
    .cbtrkr_shop_hero a.cbtrkr_shop_cta_btn{display: block; width: 100%}

    /* Room for the pinned bar, so the last section is not covered by it. */
    .cbtrkr_shop_page{padding-bottom: 84px}
    .cbtrkr_shop_actionbar{display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; align-items: center; gap: 14px; padding: 10px 14px; border-top: 1px solid var(--cbtrkr-border); background: var(--cbtrkr-surface); box-shadow: 0 -2px 12px rgba(16,24,40,.10)}
    .cbtrkr_shop_actionbar_rate{flex: 0 0 auto}
    .cbtrkr_shop_actionbar_rate .cbtrkr_shop_rate_value{font-size: 17px; letter-spacing: -.3px}
    .cbtrkr_shop_actionbar_rate .cbtrkr_shop_rate_label{font-size: 10px; margin-top: 2px}
    .cbtrkr_shop_actionbar_cta{flex: 1 1 auto}
    .cbtrkr_shop_actionbar a.cbtrkr_shop_cta_btn{display: block; width: 100%; padding: 11px 18px; font-size: 15px}
}

@media (max-width: 767px){
    .cbtrkr_shop_grid{grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px}
    .cbtrkr_shop_search{max-width: none; flex: 1 1 100%}
    .cbtrkr_shop_sort, .cbtrkr_shop_sort select{width: 100%}
    .cbtrkr_shop_letter{min-width: 26px; padding: 4px}
}

@media (max-width: 768px){
    /* Stacked, so an 84px column and a tear line down its side stop meaning
       anything - the rail becomes a line of type above the title. */
    .cbtrkr_coupon_card_main{flex-direction: column; align-items: stretch; gap: 10px}
    .cbtrkr_coupon_card_discount{flex: 0 0 auto; min-width: 0; text-align: left; font-size: 22px}
    .cbtrkr_coupon_card_discount_empty{font-size: 12px}
    .cbtrkr_coupon_card_code .cbtrkr_coupon_card_discount{border-right: 0; padding-right: 0}
    .cbtrkr_coupon_card_action{min-width: 0}
}