/* Phone app home: voucher rows. White card, brand tile on the left (discount in its corner), details on the right. */

.hm-grid{gap:12px!important;padding:2px 1px 18px!important}

/* Row (white card) */
.hm-card{border-radius:20px!important;background:#FFFFFF!important;color:#2A1B15!important;box-shadow:0 0 0 1px #F2E6DF,0 12px 26px -18px rgba(110,50,25,.32)!important;transition:transform .18s ease,box-shadow .2s ease}
.hm-card:hover{transform:none}
.hm-card:active{transform:scale(.985)}
.hm-head.hv{position:relative;width:100%;height:auto!important;box-sizing:border-box;padding:10px!important;display:flex!important;flex-direction:row;align-items:stretch;gap:clamp(12px,4vw,18px)!important;border:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* Brand tile: the picture fills it, the discount sits in its bottom corner */
.hv-media{position:relative;flex-shrink:0;overflow:hidden;width:clamp(88px,27vw,106px);align-self:stretch;min-height:124px;border-radius:15px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(60,30,15,.06)}
.hv-media::after{display:none}
.hv-letter{position:absolute;font-size:clamp(34px,11vw,46px);font-weight:500;letter-spacing:-1px;color:#FFFFFF;opacity:.95}
.hv-media img{position:absolute!important;inset:0!important;z-index:1;width:100%!important;height:100%!important;padding:0!important;border-radius:0!important;background:transparent!important;object-fit:cover;box-shadow:none!important;filter:none!important}
.hv-media::before{content:"";position:absolute;inset:0;z-index:0;transform:translateX(-100%);background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);animation:hvSh 1.4s ease-in-out 3 forwards}
@keyframes hvSh{to{transform:translateX(100%)}}
.hv-corner{position:absolute;right:0;bottom:0;z-index:3;height:32px;padding:0 15px 0 17px;border-radius:16px 0 20px 0;background:linear-gradient(135deg,#EE8A63,#D4562F);color:#FFFFFF;font-size:11px;display:inline-flex;align-items:center;gap:3px;white-space:nowrap;box-shadow:0 -6px 14px -8px rgba(120,45,20,.5)}
.hv-corner b{font-size:15px;font-weight:500;letter-spacing:-.3px}

/* Details */
.hv-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:2px 0}
.hv-r1{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.hv-n{font-size:clamp(17px,5vw,20px);font-weight:500;letter-spacing:-.4px;line-height:1.15;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hv-save{flex-shrink:0;width:30px;height:30px;margin:-4px -6px 0 0;border:0;border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hv-save:active{background:#FBEDE7}
.hv-cat{font-size:13px;color:#8A7B74}
.hv-offer{margin-top:6px;font-size:14px;font-weight:500;line-height:1.25;color:#2A1B15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hv-meta{font-size:12.5px;line-height:1.35;color:#8A7B74}
.hv-foot{display:flex;align-items:center;margin-top:8px}
.hv-cta{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:500;color:#B4492A;background:#FDEDE6;padding:6px 11px;border-radius:10px}
.hv-cta svg{transition:transform .25s ease}

/* Opened row: the codes sit under it */
.hm-offers{margin:0 10px 12px;padding:8px!important;border-radius:16px;background:#FBF6F3;color:#1F1F1F}

@media (max-width:350px){.hv-media{width:80px}}

/* Search: one clean white field */
.hm-panel{padding:0!important;background:transparent!important;border-radius:0!important;box-shadow:none!important}
.hm-field{height:52px!important;padding:0 7px 0 16px!important;border-radius:18px!important;background:#FFFFFF!important;box-shadow:0 0 0 1px #F2E6DF,0 10px 24px -16px rgba(110,50,25,.35)!important}
.hm-field button{height:38px!important;padding:0 14px!important;border-radius:13px!important;background:#FDEDE6!important;color:#B4492A!important;box-shadow:none!important;border:0!important}
.hm-field svg{stroke:#9A8379}
.hm-field .hm-input,.hm-field input{color:#2A1B15!important}

/* Banner: a richer coral card with a soft highlight, Oogmi peeking from its corner */
.hm-promo2{height:96px!important;padding-left:18px!important;border-radius:22px!important;background:radial-gradient(120% 140% at 100% 0%,rgba(255,214,190,.55),rgba(255,214,190,0) 55%),linear-gradient(115deg,#F39A74 0%,#E8714A 52%,#D85A34 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 18px 30px -18px rgba(216,90,52,.65)!important}
.hm-promo2 .pp-num{font-size:27px!important}
.hm-bpeek{width:92px!important;height:82px!important;right:12px!important;bottom:-12px!important}
.hm-bpeek .hz{width:92px!important;height:82px!important}

/* Category tabs: flat and crisp */
.hm-chips{gap:8px!important;padding:10px 12px 10px 1px!important}
.hm-chips .hm-chip{height:38px!important;padding:0 16px!important;border-radius:13px!important;background:#FFFFFF!important;color:#6F5B52!important;border:0!important;font-weight:500!important;box-shadow:0 0 0 1px #F0E3DB!important}
.hm-chips .hm-chip[aria-pressed="true"]{background:#C95A36!important;color:#FFFFFF!important;box-shadow:0 8px 16px -8px rgba(201,90,54,.7)!important}

/* The little oogmi that peeks out from a row */
.hm-tp{left:calc(clamp(88px,27vw,106px) / 2 + 10px)!important;right:auto!important}

/* The same app look wherever the app screen is shown (the phone pictures on the website, the install picture): no drawn status bar, brand background */
[aria-hidden="true"][style*="z-index: 30"][style*="height: 50px"]{display:none!important}
[style*="padding: 54px 12px"]{padding-top:calc(env(safe-area-inset-top,0px) + 14px)!important;background:radial-gradient(80% 26% at 100% 0%,rgba(255,255,255,.85),rgba(255,255,255,0) 70%),linear-gradient(180deg,#FADBCD 0%,#FCE9E0 14%,#FEF5F0 34%,#FFFAF8 62%,#FFFDFC 100%)!important}

/* Budget phones: plainer shadows (set by perf.js) */
.vz-lite .hm-card{box-shadow:0 0 0 1px #F2E6DF!important}
.vz-lite .hm-promo2{box-shadow:none!important}
.vz-lite .hm-chips .hm-chip[aria-pressed="true"]{box-shadow:none!important}
.vz-lite .hv-corner{box-shadow:none}

/* Store logos: the tile shows its brand colour while the logo loads, then the logo fades in. The letter appears only
   when a store has no logo or it cannot be loaded (perf.js marks the tile), so there is no letter-then-picture flash. */
.hv-media .hv-letter{opacity:0;transition:none}
.hv-media.vz-noimg .hv-letter{opacity:.95}
.hv-media img{opacity:0;transition:opacity .25s ease}
.hv-media img.vz-on{opacity:1}
/* Store logos are square app icons: a square tile shows each one whole (no cropped sides) */
.hv-media{align-self:center!important;min-height:0!important;height:auto!important;aspect-ratio:1/1}
/* Compact store cards: the card is as tall as its logo tile (one line each for the offer and the button) */
.hm-head.hv{align-items:center!important;gap:14px!important}
.hv-media{width:clamp(76px,23vw,88px)!important}
.hv-n{font-size:clamp(16px,4.6vw,18px)}
.hv-cat{font-size:12.5px}
.hv-offer{margin-top:3px;font-size:13.5px;-webkit-line-clamp:1}
.hv-meta{display:none}
.hv-foot{margin-top:6px}
.hv-cta{padding:5px 10px;font-size:12px}
.hv-corner{height:28px;padding:0 12px 0 14px}
.hv-corner b{font-size:14px}
/* A loaded logo sits on white, edge to edge (no coloured rim around it) */
.hv-media:not(.vz-noimg){background:#FFFFFF!important;box-shadow:none!important}
.hv-media:not(.vz-noimg)::before{display:none}