/* =========================================================================
   CouponTerritory v1.5.0 - layout only.
   1) New homepage sections (Iconic Brands, Featured Products, Journal/Blog)
   2) Coupon cards shown as a GRID (markup, tracking and behaviour unchanged)
   ========================================================================= */

/* ---------- shared editorial section header ---------- */
.ctt-hx { margin: 0 0 64px; }
.ctt-hx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.ctt-hx-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ctt-purple); margin-bottom: 8px; }
.ctt-hx-eyebrow i { font-style: normal; display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ctt-purple); color: #fff; letter-spacing: 0; font-size: 11px; }
.ctt-hx-head h2 { margin: 0; font-family: var(--ctt-font-head, inherit); font-size: clamp(26px, 3.2vw, 38px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: #12142a; }
.ctt-hx-head p { margin: 8px 0 0; max-width: 620px; color: var(--ctt-muted); font-size: 15.5px; line-height: 1.5; }
.ctt-hx-all { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border: 1.5px solid #e3def5; border-radius: 999px; font-weight: 700; font-size: 14px; color: #12142a; background: #fff; transition: all .15s; }
.ctt-hx-all:hover { background: var(--ctt-navy); border-color: var(--ctt-navy); color: #fff; }
.ctt-hx-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.ctt-hx-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.ctt-hx-toolbar .ctt-hx-tabs { margin-bottom: 0; flex: 1 1 auto; }
.ctt-hx-tabs button { appearance: none; cursor: pointer; border: 1.5px solid #e3def5; background: #fff; color: #3a3f58; padding: 9px 16px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1; transition: all .15s; white-space: nowrap; }
.ctt-hx-tabs button:hover { border-color: var(--ctt-purple); color: var(--ctt-purple); }
.ctt-hx-tabs button.is-on { background: var(--ctt-navy); border-color: var(--ctt-navy); color: #fff; }
.ctt-hx-find { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 40px; min-width: 230px; border: 1.5px solid #e3def5; border-radius: 999px; background: #fff; color: var(--ctt-muted); }
.ctt-hx-find input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; width: 100%; color: #12142a; }
.ctt-hx-find:focus-within { border-color: var(--ctt-purple); }
.ctt-hx-empty { text-align: center; color: var(--ctt-muted); padding: 24px 0; }
.is-hidden { display: none !important; }

/* ---------- Iconic Brands ---------- */
.ctt-brand-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ctt-brand { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 4 / 5; padding: 16px; border-radius: calc(var(--ctt-radius, 18px) + 4px); overflow: hidden; color: #fff;
	background: linear-gradient(160deg, hsl(var(--h, 260) 72% 40%), hsl(calc(var(--h, 260) + 40) 78% 20%)); box-shadow: 0 10px 26px rgba(23, 18, 60, .16); transition: transform .25s, box-shadow .25s; }
.ctt-brand:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(23, 18, 60, .26); }
.ctt-brand-bg { position: absolute; inset: 0; z-index: -2; background: var(--art) center / cover no-repeat; transition: transform .6s; }
.ctt-brand:hover .ctt-brand-bg { transform: scale(1.07); }
.ctt-brand.has-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 8, 24, .35), rgba(8, 8, 24, .1) 40%, rgba(8, 8, 24, .78)); }
.ctt-brand:not(.has-photo)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 70% at 50% 100%, rgba(0, 0, 0, .45), transparent 70%); }
.ctt-brand-no { position: absolute; top: 14px; left: 16px; font-size: 12px; font-weight: 800; letter-spacing: .12em; opacity: .75; }
.ctt-brand-cat { align-self: flex-end; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .3); }
.ctt-brand-word { margin: auto 0; padding: 0 4px; text-align: center; color: #fff; font-family: var(--ctt-font-head, inherit); font-size: clamp(24px, 2.6vw, 38px); font-weight: 900; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; text-shadow: 0 4px 22px rgba(0, 0, 0, .35); }
.ctt-brand-foot p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.35; text-align: center; color: rgba(255, 255, 255, .9); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ctt-brand-actions { display: flex; gap: 8px; }
.ctt-brand-visit, .ctt-brand-coupons { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 12px; font-weight: 800; font-size: 13.5px; transition: all .15s; }
.ctt-brand-visit { flex: 1; background: #fff; color: #12142a; }
.ctt-brand-visit:hover { background: #12142a; color: #fff; }
.ctt-brand-coupons { padding: 0 14px; color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ctt-brand-coupons:hover { background: rgba(255, 255, 255, .32); }

/* long names (e.g. Booking.com, Ulta Beauty) step down in size instead of breaking mid-word */
.ctt-brand-word.is-long { font-size: clamp(18px, 1.9vw, 27px); overflow-wrap: break-word; }

/* ---------- Featured Products & Top Deals ---------- */
.ctt-fp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ctt-fp { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #ece9f5; border-radius: var(--ctt-radius, 18px); overflow: hidden; box-shadow: var(--ctt-shadow, 0 4px 16px rgba(23, 18, 60, .06)); transition: transform .2s, box-shadow .2s; min-width: 0; }
.ctt-fp:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(23, 18, 60, .15); }
.ctt-fp-pic { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: linear-gradient(135deg, #ebe6fb, #fde4ef); }
.ctt-fp-pic img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; transition: transform .5s; }
.ctt-fp:hover .ctt-fp-pic img { transform: scale(1.06); }
.ctt-fp-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ctt-purple); }
.ctt-fp-badge { position: absolute; z-index: 2; top: 12px; left: 12px; padding: 5px 10px; border-radius: 999px; background: var(--ctt-orange); color: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
.ctt-fp-cat { position: absolute; z-index: 2; top: 12px; right: 12px; max-width: 55%; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .88); color: #12142a; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ctt-fp-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }
.ctt-fp-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 18px; }
.ctt-fp-brand { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ctt-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctt-fp-rate { flex: none; font-size: 12.5px; font-weight: 800; color: #b45309; background: #fef3c7; padding: 2px 8px; border-radius: 999px; }
.ctt-fp-title { margin: 0; font-size: 15.5px; line-height: 1.35; font-weight: 800; }
.ctt-fp-title a { color: #12142a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ctt-fp-title a:hover { color: var(--ctt-purple); }
.ctt-fp-desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ctt-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ctt-fp-foot { margin-top: auto; padding-top: 6px; display: flex; flex-direction: column; gap: 10px; }
.ctt-fp-price { display: flex; align-items: baseline; gap: 8px; }
.ctt-fp-price b { font-size: 20px; font-weight: 900; color: #12142a; }
.ctt-fp-price s { font-size: 13.5px; color: var(--ctt-muted); }
.ctt-fp-buy { display: flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border-radius: 12px; background: var(--ctt-navy); color: #fff; font-weight: 800; font-size: 14px; transition: all .15s; }
.ctt-fp-buy:hover { background: var(--ctt-purple); color: #fff; }

/* ---------- Journal / blog ---------- */
.ctt-mag-top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; }
.ctt-mag-img { position: relative; display: block; overflow: hidden; background: linear-gradient(135deg, #ebe6fb, #fde4ef); }
.ctt-mag-img img, .ctt-mag-thumb img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; transition: transform .5s; }
.ctt-mag-ph { position: absolute; inset: 0; background: linear-gradient(135deg, #ddd6fe, #fbcfe8); }
.ctt-mag-lead { position: relative; display: block; min-height: 420px; border-radius: calc(var(--ctt-radius, 18px) + 4px); overflow: hidden; color: #fff; box-shadow: 0 14px 34px rgba(23, 18, 60, .18); }
.ctt-mag-lead .ctt-mag-img { position: absolute; inset: 0; }
.ctt-mag-lead:hover img, .ctt-mag-card:hover img, .ctt-mag-row:hover img { transform: scale(1.05); }
.ctt-mag-lead-txt { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 10px; padding: 70px 26px 24px; background: linear-gradient(180deg, transparent, rgba(8, 8, 24, .88)); }
.ctt-mag-lead-txt strong { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.ctt-mag-ex { font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .86); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ctt-mag-by { font-size: 12.5px; color: var(--ctt-muted); }
.ctt-mag-lead .ctt-mag-by { color: rgba(255, 255, 255, .75); }
.ctt-mag-tag { align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: var(--ctt-orange); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ctt-mag-tag-sm { padding: 0; background: none; color: var(--ctt-purple); font-size: 11px; }
.ctt-mag-side { display: flex; flex-direction: column; gap: 14px; }
.ctt-mag-row { flex: 1; display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; background: #fff; border: 1px solid #ece9f5; border-radius: var(--ctt-radius, 18px); transition: all .2s; }
.ctt-mag-row:hover { box-shadow: 0 12px 28px rgba(23, 18, 60, .12); transform: translateY(-2px); }
.ctt-mag-thumb { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #ebe6fb, #fde4ef); }
.ctt-mag-row-txt, .ctt-mag-card-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ctt-mag-row-txt strong, .ctt-mag-card-txt strong { font-size: 16px; line-height: 1.35; font-weight: 800; color: #12142a; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ctt-mag-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.ctt-mag-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #ece9f5; border-radius: var(--ctt-radius, 18px); overflow: hidden; transition: all .2s; }
.ctt-mag-card:hover { box-shadow: 0 12px 28px rgba(23, 18, 60, .12); transform: translateY(-2px); }
.ctt-mag-img-sm { aspect-ratio: 16 / 10; }
.ctt-mag-card-txt { padding: 14px 16px 16px; }

/* ---------- responsive: new sections ---------- */
@media (max-width: 1000px) {
	.ctt-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ctt-fp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ctt-mag-top { grid-template-columns: minmax(0, 1fr); }
	.ctt-mag-lead { min-height: 360px; }
}
@media (max-width: 700px) {
	.ctt-hx { margin-bottom: 44px; }
	.ctt-hx-head { align-items: flex-start; flex-direction: column; gap: 12px; }
	.ctt-hx-all { padding: 8px 14px; }
	.ctt-hx-tabs, .ctt-hx-toolbar .ctt-hx-tabs { flex-wrap: nowrap; overflow-x: auto; margin-left: -14px; margin-right: -14px; padding: 0 14px 4px; scrollbar-width: none; }
	.ctt-hx-tabs::-webkit-scrollbar { display: none; }
	.ctt-hx-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
	.ctt-hx-find { min-width: 0; width: 100%; }
	.ctt-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.ctt-brand { padding: 12px; }
	.ctt-brand-word { font-size: clamp(20px, 6vw, 28px); }
	.ctt-brand-word.is-long { font-size: clamp(16px, 4.6vw, 22px); }
	.ctt-brand-foot p { display: none; }
	.ctt-brand-coupons { display: none; }
	.ctt-brand-visit { height: 38px; font-size: 13px; }
	.ctt-fp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.ctt-fp-body { padding: 11px 12px 13px; gap: 6px; }
	.ctt-fp-title { font-size: 14px; }
	.ctt-fp-desc { display: none; }
	.ctt-fp-price b { font-size: 17px; }
	.ctt-fp-buy { height: 38px; font-size: 13px; }
	.ctt-fp-cat { display: none; }
	.ctt-mag-lead { min-height: 320px; }
	.ctt-mag-lead-txt { padding: 56px 18px 18px; }
	.ctt-mag-row { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
	.ctt-mag-more { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   COUPON CARDS AS A GRID  (layout only - same markup, same buttons, same JS)
   Applies on: store, category, type, country pages, search results and the
   homepage Popular Deals. The single coupon page keeps its original layout.
   ========================================================================= */
.ctt-cards-grid, .ctt-deal-list, .ctt-sp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; align-items: stretch; margin-bottom: 18px; }
.ctt-deal-list { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }

:is(.ctt-cards-grid, .ctt-deal-list, .ctt-sp-cards) .ctt-coupon-card { display: flex; flex-direction: column; margin: 0; height: 100%; min-width: 0; }
:is(.ctt-cards-grid, .ctt-deal-list, .ctt-sp-cards) .ctt-coupon-card .ctt-cc-row {
	flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto auto;
	grid-template-areas: "logo uses" "body body" "btn btn" "note note"; gap: 12px 10px; align-items: start; padding: 18px;
}
:is(.ctt-cards-grid, .ctt-deal-list, .ctt-sp-cards) .ctt-coupon-card .ctt-cc-logo { grid-area: logo; width: 64px; height: 64px; flex: none; padding: 8px; border-radius: 14px; justify-self: start; }
:is(.ctt-cards-grid, .ctt-deal-list, .ctt-sp-cards) .ctt-coupon-card .ctt-cc-body { grid-area: body; align-self: start; }
:is(.ctt-cards-grid, .ctt-deal-list, .ctt-sp-cards) .ctt-coupon-card .ctt-cc-action { display: contents; }
:is(.ctt-cards-grid, .ctt-deal-list, .ctt-sp-cards) .ctt-coupon-card .ctt-uses-today { grid-area: uses; justify-self: end; align-self: start; text-align: right; order: 0; }
:is(.ctt-cards-grid, .ctt-deal-list, .ctt-sp-cards) .ctt-coupon-card .ctt-get-code-btn { grid-area: btn; display: flex; width: 100%; align-self: end; order: 0; }
:is(.ctt-cards-grid, .ctt-deal-list, .ctt-sp-cards) .ctt-coupon-card .ctt-get-code-label { flex: 1; justify-content: center; padding: 13px 14px; }
:is(.ctt-cards-grid, .ctt-deal-list, .ctt-sp-cards) .ctt-coupon-card .ctt-copied-note { grid-area: note; margin: 0; order: 0; }
:is(.ctt-cards-grid, .ctt-deal-list, .ctt-sp-cards) .ctt-coupon-card .ctt-coupon-title { font-size: 17px; line-height: 1.3; }
:is(.ctt-cards-grid, .ctt-deal-list, .ctt-sp-cards) .ctt-coupon-card .ctt-details-panel { padding: 14px 18px 16px; }
:is(.ctt-cards-grid, .ctt-deal-list, .ctt-sp-cards) .ctt-coupon-card .ctt-cc-footer { margin-top: auto; }

/* compact variant (homepage deals): same grid card, just tighter */
:is(.ctt-cards-grid, .ctt-deal-list, .ctt-sp-cards) .ctt-cc-compact .ctt-cc-row { padding: 14px; gap: 10px; }
:is(.ctt-cards-grid, .ctt-deal-list, .ctt-sp-cards) .ctt-cc-compact .ctt-cc-logo { width: 52px; height: 52px; padding: 6px; border-radius: 12px; }
:is(.ctt-cards-grid, .ctt-deal-list, .ctt-sp-cards) .ctt-cc-compact .ctt-coupon-title { font-size: 15px; }
:is(.ctt-cards-grid, .ctt-deal-list, .ctt-sp-cards) .ctt-cc-compact .ctt-get-code-label { padding: 11px 12px; }

/* store / category / type / country pages: columns chosen in Theme Settings -> Coupon Cards */
body .ctt-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.ctt-card-cols-3 .ctt-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.ctt-card-cols-4 .ctt-cards-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.ctt-card-cols-3 .ctt-cards-grid .ctt-cc-row, body.ctt-card-cols-4 .ctt-cards-grid .ctt-cc-row { padding: 14px; }
body.ctt-card-cols-4 .ctt-cards-grid .ctt-coupon-title { font-size: 15px; }
body.ctt-card-cols-4 .ctt-cards-grid .ctt-get-code-label { padding: 12px 8px; font-size: 12.5px; }
body.ctt-card-cols-4 .ctt-cards-grid .ctt-code-masked { min-width: 44px; padding: 0 10px; }
@media (max-width: 1000px) { body .ctt-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 600px) {
	body .ctt-cards-grid { grid-template-columns: minmax(0, 1fr); }
	.ctt-cards-grid, .ctt-deal-list, .ctt-sp-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	:is(.ctt-cards-grid, .ctt-deal-list, .ctt-sp-cards) .ctt-coupon-card .ctt-cc-row { padding: 16px; }
	:is(.ctt-cards-grid, .ctt-deal-list, .ctt-sp-cards) .ctt-coupon-card .ctt-details-panel { padding: 12px 16px 14px; }
}