/* =========================================================
   MyDealsWallet
   ========================================================= */

:root{
  --mdw-ink:        #16241C;
  --mdw-ink-soft:   #55675C;
  --mdw-ink-faint:  #8B9A90;
  --mdw-paper:      #F6F7F3;
  --mdw-card:       #FFFFFF;
  --mdw-line:       #E4E7E0;
  --mdw-line-dash:  #CDD5C8;

  --mdw-brand:        #178A4C;
  --mdw-brand-dark:   #0E6337;
  --mdw-brand-tint:   #E4F5EA;
  --mdw-brand-grad:   linear-gradient(135deg,#1FA05C,#0E6337);

  --mdw-accent:        #5B2A8C;
  --mdw-accent-dark:   #3C1C60;
  --mdw-accent-tint:   #F1EAF9;
  --mdw-accent-grad:   linear-gradient(135deg,#7A3FB5,#3C1C60);

  --mdw-gold:        #96660D;
  --mdw-gold-tint:   #FBF1DD;
  --mdw-danger:      #C13B2A;
  --mdw-danger-tint: #FBEAE7;

  --mdw-radius-sm: 8px;
  --mdw-radius-md: 12px;
  --mdw-radius-lg: 16px;
  --mdw-radius-xl: 20px;
  --mdw-radius-pill: 999px;

  --mdw-shadow-card: 0 1px 2px rgba(22,36,28,.04), 0 8px 20px -12px rgba(22,36,28,.14);
  --mdw-shadow-card-hover: 0 1px 2px rgba(22,36,28,.05), 0 16px 32px -14px rgba(22,36,28,.22);
  --mdw-shadow-pop:  0 20px 48px -16px rgba(22,36,28,.38);
  --mdw-shadow-brand: 0 10px 22px -10px rgba(14,99,55,.55);
  --mdw-shadow-accent: 0 10px 22px -10px rgba(60,28,96,.5);

  --mdw-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mdw-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

.mdw-page *{ box-sizing:border-box; }
.mdw-page{
  font-family:var(--mdw-font);
  color:var(--mdw-ink);
  background:var(--mdw-paper);
  -webkit-font-smoothing:antialiased;
}
:where(.mdw-page) img{ max-width:100%; display:block; }
:where(.mdw-page) a{ color:inherit; text-decoration:none; }
:where(.mdw-page) button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; padding:0; }
:where(.mdw-page) ul{ margin:0; padding:0; list-style:none; }
:where(.mdw-page) h1, :where(.mdw-page) h2, :where(.mdw-page) h3{ font-family:var(--mdw-font); color:var(--mdw-ink); margin:0; line-height:1.2; }
:where(.mdw-page) p{ margin:0; }
.mdw-page [hidden]{ display:none !important; }
.mdw-page :focus-visible{ outline:2.5px solid var(--mdw-accent); outline-offset:2px; border-radius:4px; }

.mdw-visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion: reduce){
  .mdw-page *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

.mdw-container{ width:100%; max-width:1200px; margin:0 auto; padding:0 20px; }
.mdw-skip-link{
  position:absolute; left:-999px; top:0; background:var(--mdw-ink); color:#fff;
  padding:10px 16px; border-radius:8px; z-index:999;
}
.mdw-skip-link:focus{ left:16px; top:16px; }

/* =========================================================
   Breadcrumb
   ========================================================= */
.mdw-breadcrumb{
  padding:16px 0 0;
  font:600 12.5px/1 var(--mdw-font);
  color:var(--mdw-ink-faint);
  display:flex; flex-wrap:wrap; align-items:center; gap:7px;
}
.mdw-breadcrumb a:hover{ color:var(--mdw-brand-dark); }
.mdw-breadcrumb .is-current{ color:var(--mdw-ink-soft); }

.mdw-breadcrumb-bottom-wrap{ border-top:1px solid var(--mdw-line); padding:18px 0 6px; margin-top:4px; }
.mdw-breadcrumb-bottom-wrap .mdw-breadcrumb{ padding:0; }

/* =========================================================
   Bottom subscribe band
   ========================================================= */
.mdw-subscribe-band{
  position:relative; overflow:hidden;
  background:var(--mdw-ink); border-radius:var(--mdw-radius-xl);
  padding:34px 30px; margin:8px 0 20px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
}
.mdw-subscribe-band::before{
  content:""; position:absolute; inset:0; background:var(--mdw-brand-grad); opacity:.16; pointer-events:none;
}
.mdw-subscribe-copy{ position:relative; max-width:400px; }
.mdw-subscribe-copy h2{ color:#fff; font-size:21px; letter-spacing:-.01em; margin-bottom:6px; }
.mdw-subscribe-copy p{ color:#B9C4BC; font:400 13.5px/1.6 var(--mdw-font); }
.mdw-subscribe-form{
  position:relative; display:flex; flex-wrap:wrap; gap:10px;
  flex:1; min-width:280px; max-width:560px;
}
.mdw-subscribe-form input{
  flex:1; min-width:150px; min-height:46px; padding:0 16px;
  border-radius:var(--mdw-radius-pill); border:1.5px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08); color:#fff; font:500 13.5px/1 var(--mdw-font); outline:none;
  transition:border-color .15s ease, background .15s ease;
}
.mdw-subscribe-form input::placeholder{ color:#8FA096; }
.mdw-subscribe-form input:focus{ border-color:var(--mdw-brand); background:rgba(255,255,255,.14); }
.mdw-subscribe-form button{ flex-shrink:0; }
.mdw-subscribe-note{ position:relative; width:100%; color:#77897F; font:400 11.5px/1.5 var(--mdw-font); margin-top:2px; }

@media (max-width:640px){
  .mdw-subscribe-band{ padding:26px 20px; }
  .mdw-subscribe-form{ min-width:100%; }
}

/* =========================================================
   Store header (main column)
   ========================================================= */
.mdw-store-head{ padding:16px 0 20px; }
.mdw-store-head-row{ display:flex; align-items:center; gap:14px; }
.mdw-store-head-logo{ width:52px; height:52px; flex-shrink:0; }
@media (min-width:640px){ .mdw-store-head-logo{ width:60px; height:60px; } }
.mdw-store-head h1{ font-size:23px; letter-spacing:-.01em; margin-bottom:7px; }
.mdw-store-sub{
  font:500 13px/1.5 var(--mdw-font); color:var(--mdw-ink-soft);
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.mdw-verified-tag{ display:inline-flex; align-items:center; gap:5px; color:var(--mdw-brand-dark); font-weight:700; }
.mdw-store-sub .mdw-dot{ color:var(--mdw-line-dash); }

@media (min-width:640px){ .mdw-store-head h1{ font-size:28px; } }

.mdw-store-logo{
  border-radius:var(--mdw-radius-md);
  background:var(--mdw-card); border:1px solid var(--mdw-line);
  box-shadow:var(--mdw-shadow-card);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; padding:5px;
}
.mdw-store-logo-inner{
  width:100%; height:100%; border-radius:9px;
  background:var(--mdw-accent-grad);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font:800 10px/1.15 var(--mdw-font); text-align:center;
}
.mdw-store-logo-img{
  width:100%; height:100%; border-radius:9px; object-fit:contain;
  background:#fff; padding:4px;
}

.mdw-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:44px; padding:0 20px; border-radius:var(--mdw-radius-pill);
  font:700 14px/1 var(--mdw-font); white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.mdw-btn:active{ transform:scale(.98); }
.mdw-btn-primary{ background:var(--mdw-brand-grad); color:#fff; box-shadow:var(--mdw-shadow-brand); }
.mdw-btn-primary:hover{ transform:translateY(-1px); box-shadow:0 14px 28px -10px rgba(14,99,55,.6); }
.mdw-btn-outline{ background:var(--mdw-card); color:var(--mdw-ink); border:1.5px solid var(--mdw-line); }
.mdw-btn-outline:hover{ border-color:var(--mdw-ink); }
.mdw-btn-block{ width:100%; }

/* =========================================================
   Savings summary
   ========================================================= */
.mdw-summary{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
  margin-bottom:22px;
}
.mdw-summary-item{
  background:var(--mdw-card); border:1px solid var(--mdw-line); border-radius:var(--mdw-radius-md);
  padding:13px 14px;
}
.mdw-summary-item .mdw-num{ font:800 19px/1.1 var(--mdw-font); color:var(--mdw-ink); }
.mdw-summary-item .mdw-num.is-brand{ color:var(--mdw-brand-dark); }
.mdw-summary-item .mdw-num.is-accent{ color:var(--mdw-accent); }
.mdw-summary-item .mdw-lbl{ font:600 11.5px/1.4 var(--mdw-font); color:var(--mdw-ink-faint); margin-top:3px; }

@media (min-width:640px){
  .mdw-summary{ grid-template-columns:repeat(4,1fr); }
}

/* =========================================================
   Layout: sidebar (left) + main (right)
   ========================================================= */
.mdw-layout{
  display:grid; grid-template-columns:1fr; gap:32px;
  padding-bottom:56px;
}
.mdw-main{ order:1; min-width:0; }
.mdw-aside{ order:2; }

@media (min-width:1000px){
  .mdw-layout{ grid-template-columns: 288px minmax(0,1fr); gap:36px; align-items:start; }
  .mdw-main{ order:2; }
  .mdw-aside{ order:1; position:sticky; top:24px; padding-top: 10px;}
}

/* =========================================================
   Sidebar
   ========================================================= */
.mdw-side-card{
  background:var(--mdw-card); border:1px solid var(--mdw-line); border-radius:var(--mdw-radius-lg);
  padding:20px; margin-bottom:16px; box-shadow:var(--mdw-shadow-card);
}
.mdw-side-card h2{ font:800 17px/1.2 var(--mdw-font); letter-spacing:-.01em; margin-bottom:10px; }

.mdw-side-store-row{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.mdw-side-store-row .mdw-store-logo{ width:52px; height:52px; }
.mdw-side-store-row strong{ display:block; font-size:14.5px; color:var(--mdw-ink); }
.mdw-side-store-row span{ font:500 12px/1.4 var(--mdw-font); color:var(--mdw-ink-faint); }

.mdw-kv-list{ margin-bottom:14px; }
.mdw-kv-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0; border-bottom:1px solid var(--mdw-line);
  font:500 13px/1.4 var(--mdw-font);
}
.mdw-kv-row:last-child{ border-bottom:none; }
.mdw-kv-row span:first-child{ color:var(--mdw-ink-faint); }
.mdw-kv-row span:last-child{ color:var(--mdw-ink); font-weight:700; }

.mdw-alert-form{ display:flex; flex-direction:column; gap:8px; }
.mdw-alert-form input{
  min-height:42px; padding:0 14px; border-radius:var(--mdw-radius-pill);
  border:1.5px solid var(--mdw-line); font:500 13.5px/1 var(--mdw-font); outline:none; width:100%;
}
.mdw-alert-form input:focus{ border-color:var(--mdw-brand); }
.mdw-alert-note{ font:400 11.5px/1.5 var(--mdw-font); color:var(--mdw-ink-faint); margin-top:6px; }

.mdw-chip-list{ display:flex; flex-wrap:wrap; gap:7px; }
.mdw-chip{
  padding:6px 12px; border-radius:var(--mdw-radius-pill);
  background:var(--mdw-paper); border:1px solid var(--mdw-line);
  font:600 12px/1 var(--mdw-font); color:var(--mdw-ink-soft);
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.mdw-chip:hover{ border-color:var(--mdw-accent); color:var(--mdw-accent); background:var(--mdw-accent-tint); }

/* ---- Vertical sidebar lists (Related / Popular Stores / Categories) ---- */
.mdw-vlist{ display:flex; flex-direction:column; }
.mdw-vlist-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 4px; background:transparent;
  border-bottom:1px solid var(--mdw-line);
  transition:background .15s ease, padding-left .15s ease;
}
.mdw-vlist-item:last-child{ border-bottom:none; padding-bottom:2px; }
.mdw-vlist-item:first-child{ padding-top:2px; }
.mdw-vlist-item:hover{ background:var(--mdw-paper); padding-left:8px; }
.mdw-vlist-avatar{
  flex-shrink:0; width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font:800 13px/1 var(--mdw-font); color:var(--mdw-accent); letter-spacing:.01em;
  background:var(--mdw-accent-tint); overflow:hidden; position:relative;
}
.mdw-vlist-avatar-img{
  width:100%; height:100%; object-fit:contain; background:#fff; padding:5px;
}
.mdw-vlist-avatar-fallback{
  width:100%; height:100%; align-items:center; justify-content:center;
  font:800 13px/1 var(--mdw-font); color:var(--mdw-accent); letter-spacing:.01em;
}
.mdw-vlist-name{
  flex:1; min-width:0; font:600 14.5px/1.35 var(--mdw-font); color:var(--mdw-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mdw-vlist-chevron{
  flex-shrink:0; color:var(--mdw-ink-faint);
  transition:transform .15s ease, color .15s ease;
}
.mdw-vlist-item:hover .mdw-vlist-chevron{ transform:translate(2px,-2px); color:var(--mdw-accent); }

/* =========================================================
   Toolbar: count + filters + sort
   ========================================================= */
.mdw-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:16px;
}
.mdw-toolbar-count{ font:700 15px/1 var(--mdw-font); color:var(--mdw-ink); }
.mdw-toolbar-controls{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.mdw-filter-chip{
  padding:7px 14px; border-radius:var(--mdw-radius-pill);
  border:1.5px solid var(--mdw-line); background:var(--mdw-card);
  font:600 12.5px/1 var(--mdw-font); color:var(--mdw-ink-soft);
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.mdw-filter-chip:hover{ border-color:var(--mdw-brand); }
.mdw-filter-chip.is-active{ background:var(--mdw-ink); border-color:var(--mdw-ink); color:#fff; }
.mdw-sort-select{
  min-height:38px; padding:0 32px 0 12px; border-radius:var(--mdw-radius-pill);
  border:1.5px solid var(--mdw-line); background:var(--mdw-card);
  font:600 12.5px/1 var(--mdw-font); color:var(--mdw-ink);
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2355675C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center;
}

/* =========================================================
   Coupon list & cards
   ========================================================= */
.mdw-coupon-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:36px; }

.mdw-coupon-card{
  background:var(--mdw-card); border:1px solid var(--mdw-line); border-radius:var(--mdw-radius-xl);
  box-shadow:var(--mdw-shadow-card); overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease;
}
.mdw-coupon-card:hover{ box-shadow:var(--mdw-shadow-card-hover); transform:translateY(-2px); }
.mdw-coupon-card.is-featured{ border-color:var(--mdw-brand); box-shadow:0 0 0 1.5px var(--mdw-brand), var(--mdw-shadow-card); }
.mdw-coupon-card.is-featured:hover{ box-shadow:0 0 0 1.5px var(--mdw-brand), var(--mdw-shadow-card-hover); }
.mdw-featured-flag{
  display:flex; align-items:center; gap:6px;
  background:var(--mdw-brand-grad); color:#fff;
  font:700 10.5px/1 var(--mdw-font); text-transform:uppercase; letter-spacing:.04em;
  padding:6px 18px;
}

.mdw-coupon-main{ display:grid; grid-template-columns:88px 1fr; }
.mdw-coupon-value{
  background:linear-gradient(165deg,var(--mdw-brand-tint),#D8F0DF);
  border-right:2px dashed var(--mdw-line-dash);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:10px 6px; gap:1px;
}
.mdw-coupon-value .mdw-amt{ font:800 20px/1.08 var(--mdw-font); color:var(--mdw-brand-dark); word-break:break-word; }
.mdw-coupon-value .mdw-unit{ font:700 10px/1 var(--mdw-font); color:var(--mdw-brand-dark); text-transform:uppercase; opacity:.75; }

.mdw-coupon-value.is-logo{ padding:10px; }
.mdw-coupon-value-logo{
  width:48px; height:48px; border-radius:10px; object-fit:contain;
  background:#fff; padding:5px; box-shadow:var(--mdw-shadow-card);
}
/* Shown automatically (via each card's existing onerror handler) if a
   store's logo asset fails to load — same fallback pattern used by the
   sidebar's .mdw-vlist-avatar-fallback and the header .mdw-store-logo-inner. */
.mdw-coupon-value-logo-fallback{
  width:48px; height:48px; border-radius:10px;
  background:var(--mdw-accent-grad); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font:800 13px/1 var(--mdw-font); letter-spacing:.01em;
}

/* ---- Category pages: each card mixes offers from many stores, so the
   merchant name needs to be visible in the card copy itself (a single-store
   page like store-metaburn.html doesn't need this — the page header already
   says which store it is). Sits just above the badge. ---- */
.mdw-coupon-storelink{
  display:inline-flex; align-items:center; gap:4px;
  font:800 11.5px/1.3 var(--mdw-font); color:var(--mdw-ink-faint);
  text-decoration:none; text-transform:uppercase; letter-spacing:.035em;
  margin-bottom:5px;
}
.mdw-coupon-storelink:hover{ color:var(--mdw-brand-dark); }
.mdw-coupon-storelink svg{ flex-shrink:0; opacity:.6; }

/* ---- Category hero icon (replaces the single merchant logo used on
   store pages — a category has no one logo, so it gets a brand-gradient
   icon badge instead, reusing the same .mdw-store-logo box treatment). ---- */
.mdw-category-icon{
  background:var(--mdw-accent-grad); border-color:transparent;
  box-shadow:var(--mdw-shadow-accent);
  display:flex; align-items:center; justify-content:center; color:#fff;
}

/* ---- Sidebar "category snapshot" card on category pages: same visual
   language as .mdw-kv-list but without a per-store Visit Store CTA. ---- */
.mdw-cat-store-count{
  display:inline-flex; align-items:center; gap:6px;
  font:700 12.5px/1 var(--mdw-font); color:var(--mdw-brand-dark);
  background:var(--mdw-brand-tint); border-radius:var(--mdw-radius-pill);
  padding:6px 12px; margin-top:2px;
}

/* ---- Stacked "UP TO / X% / OFF" treatment for percent-based offers ---- */
.mdw-coupon-value.is-percent{
  border-right:2px dashed var(--mdw-line-dash);
  padding:8px 4px; gap:0;
}
.mdw-coupon-value.is-percent .mdw-pct-pre{ font:800 9.5px/1 var(--mdw-font); color:var(--mdw-accent); text-transform:uppercase; letter-spacing:.06em; }
.mdw-coupon-value.is-percent .mdw-pct-num{ font:800 21px/1.1 var(--mdw-font); color:var(--mdw-accent-dark); }
.mdw-coupon-value.is-percent .mdw-pct-off{ font:800 9.5px/1 var(--mdw-font); color:var(--mdw-accent); text-transform:uppercase; letter-spacing:.06em; }

.mdw-coupon-body{ padding:12px 16px 10px; min-width:0; }
.mdw-coupon-badge{
  display:inline-block; font:700 10px/1 var(--mdw-font); text-transform:uppercase; letter-spacing:.04em;
  padding:3px 8px; border-radius:6px; margin-bottom:6px;
}
.mdw-coupon-badge.is-code{ background:var(--mdw-brand-tint); color:var(--mdw-brand-dark); }
/* On category pages the value box holds the store's logo instead of the
   $/% amount, so this chip keeps the savings figure visible at a glance
   — sits right next to the type badge, same baseline. */
.mdw-coupon-savings-chip{
  display:inline-block; font:800 10px/1 var(--mdw-font); text-transform:uppercase; letter-spacing:.03em;
  padding:3px 8px; border-radius:6px; margin-bottom:6px; margin-left:5px;
  background:var(--mdw-accent-tint); color:var(--mdw-accent-dark);
}
.mdw-coupon-badge.is-deal{ background:var(--mdw-gold-tint); color:var(--mdw-gold); }

.mdw-coupon-title{ font:700 16px/1.35 var(--mdw-font); color:var(--mdw-ink); margin-bottom:3px; }
@media (min-width:640px){ .mdw-coupon-title{ font-size:17.5px; } }

.mdw-coupon-title-btn{
  display:inline-flex; align-items:center; gap:6px; width:100%; text-align:left;
  transition:color .15s ease;
}
.mdw-coupon-title-btn:hover{ color:var(--mdw-brand-dark); }
.mdw-coupon-title-btn .mdw-title-arrow{
  flex-shrink:0; color:var(--mdw-brand-dark); opacity:0; transform:translateX(-4px);
  transition:opacity .15s ease, transform .15s ease;
}
.mdw-coupon-title-btn:hover .mdw-title-arrow{ opacity:1; transform:translateX(0); }
.mdw-coupon-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font:500 11.5px/1 var(--mdw-font); color:var(--mdw-ink-faint); margin-bottom:8px;
}
.mdw-coupon-meta .mdw-dot{ color:var(--mdw-line-dash); }
.mdw-no-code-note{ display:inline-flex; align-items:center; gap:5px; font:600 12px/1 var(--mdw-font); color:var(--mdw-ink-faint); }

/* ---- Beautiful CTA buttons ---- */
.mdw-coupon-cta{ min-height:40px; }

.mdw-cta-btn{
  display:flex; align-items:stretch; width:100%; min-height:40px;
  border-radius:var(--mdw-radius-pill); overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
.mdw-cta-btn:hover{ transform:translateY(-1.5px); }
.mdw-cta-btn:active{ transform:translateY(0) scale(.98); }

/* Show Code and Get Deal share one brand color so the two actions
   read as equally trustworthy, rather than implying one is "better". */
.mdw-cta-code,
.mdw-cta-deal{ background:var(--mdw-brand-grad); box-shadow:var(--mdw-shadow-brand); }
.mdw-cta-code:hover,
.mdw-cta-deal:hover{ box-shadow:0 16px 30px -10px rgba(14,99,55,.62); }

.mdw-cta-label{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  color:#fff; font:700 12.5px/1 var(--mdw-font); padding:0 14px;
}

/* ---- Gentle idle animation on CTA buttons ---- */
@keyframes mdwCtaGlow{
  0%, 100%{ box-shadow:var(--mdw-shadow-brand); }
  50%{ box-shadow:0 12px 26px -8px rgba(14,99,55,.62); }
}
.mdw-cta-btn{ animation:mdwCtaGlow 2.6s ease-in-out infinite; }
.mdw-cta-btn:hover{ animation-play-state:paused; }
@keyframes mdwCtaArrowNudge{
  0%, 100%{ transform:translateX(0); }
  50%{ transform:translateX(3px); }
}
.mdw-cta-label svg{ animation:mdwCtaArrowNudge 1.7s ease-in-out infinite; }

.mdw-coupon-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 16px; border-top:1px solid var(--mdw-line); background:var(--mdw-paper);
}
.mdw-details-trigger{
  display:inline-flex; align-items:center; gap:6px;
  font:600 12.5px/1 var(--mdw-font); color:var(--mdw-ink-soft);
}
.mdw-details-trigger:hover{ color:var(--mdw-ink); }
.mdw-details-trigger svg{ transition:transform .2s ease; }
.mdw-details-trigger[aria-expanded="true"] svg{ transform:rotate(180deg); }

.mdw-feedback{ display:flex; align-items:center; gap:3px; }
.mdw-fb-btn{
  width:28px; height:28px; border-radius:var(--mdw-radius-pill);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--mdw-ink-faint); transition:background .15s ease, color .15s ease;
}
.mdw-fb-btn:hover{ background:var(--mdw-brand-tint); color:var(--mdw-brand-dark); }
.mdw-fb-btn.is-active{ background:var(--mdw-brand-tint); color:var(--mdw-brand-dark); }
.mdw-fb-btn.is-down:hover, .mdw-fb-btn.is-down.is-active{ background:var(--mdw-danger-tint); color:var(--mdw-danger); }

.mdw-coupon-details{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.mdw-coupon-details.is-open{ max-height:200px; }
.mdw-coupon-details p{ padding:14px 18px; font:400 13px/1.7 var(--mdw-font); color:var(--mdw-ink-soft); border-top:1px solid var(--mdw-line); }

.mdw-coupon-card.is-hidden{ display:none; }
.mdw-coupon-card.is-page-hidden{ display:none; }

/* ---- Pagination ---- */
.mdw-pagination{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:6px; margin:28px 0 4px;
}
.mdw-page-btn{
  min-width:38px; height:38px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--mdw-radius-md); border:1.5px solid var(--mdw-line);
  background:var(--mdw-card); color:var(--mdw-ink-soft);
  font:700 13px/1 var(--mdw-font); cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease, transform .1s ease;
}
.mdw-page-btn:hover:not(:disabled){ border-color:var(--mdw-brand); color:var(--mdw-brand-dark); }
.mdw-page-btn:active:not(:disabled){ transform:scale(.96); }
.mdw-page-btn.is-active{
  background:var(--mdw-brand-grad); border-color:transparent; color:#fff; box-shadow:var(--mdw-shadow-brand);
}
.mdw-page-btn.mdw-page-nav{ color:var(--mdw-ink); }
.mdw-page-btn:disabled{ opacity:.35; cursor:default; }
.mdw-page-ellipsis{
  display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:38px;
  color:var(--mdw-ink-faint); font:700 13px/1 var(--mdw-font);
}

@media (min-width:560px){
  .mdw-coupon-main{ grid-template-columns:104px 1fr; }
  .mdw-coupon-body{ display:flex; align-items:center; gap:18px; padding:14px 20px; }
  .mdw-coupon-copy{ flex:1; min-width:0; }
  .mdw-coupon-title{ margin-bottom:3px; }
  .mdw-coupon-meta{ margin-bottom:0; }
  .mdw-coupon-cta{ flex-shrink:0; width:160px; }
}

/* On mobile the coupon title itself is the tap target; the pill
   Show Code / Get Deal button is hidden to keep the card compact. */
@media (max-width:559.98px){
  .mdw-coupon-cta{ display:none; }
  .mdw-coupon-title-btn{ color:var(--mdw-brand-dark); }
  .mdw-coupon-title-btn .mdw-title-arrow{ opacity:1; transform:translateX(0); }
}

/* =========================================================
   Article content
   ========================================================= */
.mdw-article{ margin-top:6px; }
.mdw-article h2{ font-size:19px; letter-spacing:-.01em; margin:38px 0 12px; }
.mdw-article h2:first-child{ margin-top:0; }
.mdw-article h3{ font:700 15px/1.4 var(--mdw-font); margin:18px 0 5px; }
.mdw-article p{ font:400 14px/1.75 var(--mdw-font); color:var(--mdw-ink-soft); margin-bottom:11px; }
.mdw-article ul{ margin:8px 0 16px; }
.mdw-article li{ font:400 14px/1.8 var(--mdw-font); color:var(--mdw-ink-soft); padding-left:20px; position:relative; margin-bottom:5px; }
.mdw-article li::before{ content:""; position:absolute; left:2px; top:9px; width:5px; height:5px; border-radius:50%; background:var(--mdw-brand); }

.mdw-ingredient-grid{ display:grid; grid-template-columns:1fr; gap:10px; margin:14px 0 6px; }
@media (min-width:640px){ .mdw-ingredient-grid{ grid-template-columns:1fr 1fr; } }
.mdw-ingredient-card{ background:var(--mdw-card); border:1px solid var(--mdw-line); border-radius:var(--mdw-radius-md); padding:14px 16px; }
.mdw-ingredient-card h3{ margin:0 0 5px; font-size:14px; }
.mdw-ingredient-card p{ margin:0; font-size:13px; }

/* FAQ */
.mdw-faq-item{ border-bottom:1px solid var(--mdw-line); }
.mdw-faq-item:first-child{ border-top:1px solid var(--mdw-line); }
.mdw-faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 2px; text-align:left; font:700 14px/1.5 var(--mdw-font); color:var(--mdw-ink);
}
.mdw-faq-q .mdw-plus{
  flex-shrink:0; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--mdw-line-dash);
  position:relative; transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.mdw-faq-q .mdw-plus::before,.mdw-faq-q .mdw-plus::after{ content:""; position:absolute; background:var(--mdw-ink-soft); transition:background .2s ease; }
.mdw-faq-q .mdw-plus::before{ left:50%; top:5px; bottom:5px; width:1.5px; transform:translateX(-50%); }
.mdw-faq-q .mdw-plus::after{ top:50%; left:5px; right:5px; height:1.5px; transform:translateY(-50%); }
.mdw-faq-q[aria-expanded="true"] .mdw-plus{ transform:rotate(135deg); border-color:var(--mdw-brand); background:var(--mdw-brand-tint); }
.mdw-faq-q[aria-expanded="true"] .mdw-plus::before,.mdw-faq-q[aria-expanded="true"] .mdw-plus::after{ background:var(--mdw-brand-dark); }
.mdw-faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.mdw-faq-a p{ padding:0 2px 16px; font:400 13.5px/1.7 var(--mdw-font); color:var(--mdw-ink-soft); margin:0; }

/* =========================================================
   Modal (Show Code / Get Deal)
   ========================================================= */
.mdw-modal-overlay{
  position:fixed; inset:0; background:rgba(22,36,28,.55);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:300;
}
.mdw-modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.mdw-modal{
  background:#fff; border-radius:var(--mdw-radius-xl); box-shadow:var(--mdw-shadow-pop);
  width:100%; max-width:380px; padding:30px 26px 26px; text-align:center; position:relative;
  transform:translateY(10px); transition:transform .18s ease;
}
.mdw-modal-overlay.is-open .mdw-modal{ transform:translateY(0); }
.mdw-modal-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--mdw-ink-faint);
}
.mdw-modal-close:hover{ background:var(--mdw-paper); color:var(--mdw-ink); }
.mdw-modal .mdw-store-logo{ width:60px; height:60px; margin:0 auto 12px; }
.mdw-modal-store{ font:700 11px/1 var(--mdw-font); text-transform:uppercase; letter-spacing:.05em; color:var(--mdw-ink-faint); margin-bottom:8px; }
.mdw-modal-headline{ font:700 17px/1.4 var(--mdw-font); color:var(--mdw-ink); margin-bottom:20px; }

.mdw-modal-code-row{
  display:flex; align-items:center;
  border:2px dashed var(--mdw-brand); border-radius:var(--mdw-radius-pill);
  overflow:hidden; margin-bottom:14px; background:var(--mdw-brand-tint);
}
.mdw-modal-code-row .mdw-code{ flex:1; padding:0 16px; min-height:50px; display:flex; align-items:center; justify-content:center; font:800 17px/1 var(--mdw-font-mono); letter-spacing:.05em; color:var(--mdw-brand-dark); }
.mdw-modal-code-row .mdw-copy-btn{ flex-shrink:0; min-height:50px; padding:0 20px; background:var(--mdw-brand-grad); color:#fff; font:700 13px/1 var(--mdw-font); transition:filter .15s ease; }
.mdw-modal-code-row .mdw-copy-btn:hover{ filter:brightness(1.08); }
.mdw-modal-code-row .mdw-copy-btn.is-copied{ background:var(--mdw-ink); }

.mdw-modal-nocode{
  display:flex; align-items:center; gap:10px; text-align:left;
  background:var(--mdw-accent-tint); border-radius:var(--mdw-radius-md);
  padding:14px 16px; margin-bottom:16px;
}
.mdw-modal-nocode svg{ flex-shrink:0; color:var(--mdw-accent); }
.mdw-modal-nocode p{ font:600 12.5px/1.5 var(--mdw-font); color:var(--mdw-accent-dark); }

.mdw-modal-store-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:48px; border-radius:var(--mdw-radius-pill);
  background:var(--mdw-ink); color:#fff; font:700 14px/1 var(--mdw-font);
  margin-bottom:14px; transition:background .15s ease;
}
.mdw-modal-store-btn:hover{ background:#0A130E; }

.mdw-modal-instructions{ font:400 12px/1.6 var(--mdw-font); color:var(--mdw-ink-faint); }
.mdw-modal-instructions strong{ color:var(--mdw-ink-soft); }

/* toast */
.mdw-toast{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%,16px);
  background:var(--mdw-ink); color:#fff; font:600 13px/1 var(--mdw-font);
  padding:12px 18px; border-radius:var(--mdw-radius-pill); box-shadow:var(--mdw-shadow-pop);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:320;
  max-width:88vw; text-align:center;
}
.mdw-toast.is-visible{ opacity:1; transform:translate(-50%,0); }


.mdw-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 28px 0;
}
.mdw-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--mdw-border, #e2e2e2);
  color: var(--mdw-ink, #1a1a1a);
  text-decoration: none;
  font: 600 13px/1 var(--mdw-font);
}
.mdw-page-link:hover { border-color: var(--mdw-brand, #7c3aed); }
.mdw-page-link.is-active {
  background: var(--mdw-brand, #7c3aed);
  border-color: var(--mdw-brand, #7c3aed);
  color: #fff;
}
.mdw-page-link.is-disabled {
  opacity: .4;
  pointer-events: none;
}
.mdw-page-ellipsis { padding: 0 4px; color: var(--mdw-ink-soft, #888); }