/* GringoBox customer dashboard, Step 8 Phase 1.
   Layout and hierarchy follow approved board #04; visual system follows #03; characters and logo are the exact
   approved pixels from boards #01 and #04 (images/v8). All labels, numbers and statuses are live text. */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/baloo-2-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/baloo-2-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/baloo-2-latin-800-normal.woff2') format('woff2')}

body.d4-on{--d4-ink:#0E2F78;--d4-blue:#1257D6;--d4-orange:#F26A1B;--d4-line:#D9E9F7;--d4-head:'Baloo 2','Nunito',system-ui,sans-serif;
  background:linear-gradient(180deg,#DDF0FC 0,#EEF7FD 420px,#F3F9FE 100%) no-repeat,#F3F9FE}
body.d4-on > header.gb-header{display:none}
body.d4-on .gb-wrap{max-width:1500px;padding-top:12px}

/* ---------- illustrated header (#04) ---------- */
.d4-top{position:relative;border-radius:18px;overflow:hidden;margin-bottom:14px;box-shadow:var(--shadow);
  background:linear-gradient(90deg,#8FD0F5 0,#BFE4FA 60%,#D6EEFC 100%)}
.d4-top-art{display:block;width:100%;aspect-ratio:590/213;object-fit:cover;object-position:left center}
.d4-welcome{position:relative;margin:-22px 10px 10px;background:rgba(255,255,255,.97);border-radius:16px;padding:12px 14px;box-shadow:0 6px 18px rgba(14,47,120,.18)}
.d4-who{display:flex;align-items:center;gap:12px}
.d4-avatar{width:54px;height:54px;border-radius:50%;flex:0 0 auto;border:3px solid #BFE0F7;background:#EAF5FE url('images/v8/avatar.png') center 12%/118% auto no-repeat}
.d4-who .tx{min-width:0;flex:1;line-height:1.15}
.d4-who small{display:block;font-size:13.5px;color:#4A5F86;font-weight:700}
.d4-who b{display:block;font-family:var(--d4-head);font-weight:800;font-size:23px;color:var(--d4-ink);overflow-wrap:anywhere}
.d4-bell{position:relative;width:42px;height:42px;border-radius:12px;background:#EAF3FC;color:var(--d4-ink);display:grid;place-items:center;flex:0 0 auto;text-decoration:none}
.d4-bell svg{width:22px;height:22px}
.d4-bell .gb-badge{top:-6px;right:-6px}
.d4-cid{font-size:12.5px;color:#5C6F92;font-weight:700;margin:8px 0 0}
/* 097.8 (M1): the ES/EN switch is always visible next to the customer code when signed in (it was only inside the Mi Cuenta menu) */
.d4-bar{display:flex;align-items:center;justify-content:space-between;gap:6px 10px;flex-wrap:wrap;margin-top:8px}
.d4-bar .d4-cid{margin:0;min-width:0}
.d4-bar .d4-lang{margin-left:auto}
.d4-acct{margin-top:8px;border-top:1px solid var(--d4-line);padding-top:6px}
.d4-acct summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;font-weight:800;font-size:14px;color:var(--d4-ink);padding:6px 4px;border-radius:10px}
.d4-acct summary::-webkit-details-marker{display:none}
.d4-acct summary svg{width:20px;height:20px}
.d4-acct summary::after{content:'';margin-left:auto;width:8px;height:8px;border-right:2.5px solid var(--d4-ink);border-bottom:2.5px solid var(--d4-ink);transform:rotate(45deg) translateY(-3px);transition:transform .15s}
.d4-acct[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.d4-acct summary:focus-visible,.d4-bell:focus-visible,.d4-nav a:focus-visible,.d4-link:focus-visible{outline:3px solid rgba(18,87,214,.45);outline-offset:2px}
.d4-menu{display:grid;gap:2px;padding:4px 0 2px}
.d4-menu a,.d4-menu button{display:block;text-align:left;width:100%;background:none;border:0;font:inherit;font-weight:800;font-size:14px;color:var(--d4-ink);padding:9px 8px;border-radius:10px;text-decoration:none;cursor:pointer}
.d4-menu a:hover,.d4-menu button:hover{background:#EAF3FC}
.d4-menu .row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px;font-weight:800;font-size:14px;color:var(--d4-ink)}
@media(min-width:900px){
  .d4-top{height:213px}
  .d4-top-art{position:absolute;inset:0 auto 0 0;height:100%;width:calc(100% - 300px);aspect-ratio:auto;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent)}
  .d4-welcome{position:absolute;top:18px;right:16px;width:284px;margin:0;z-index:2}
  .d4-acct .d4-menu{position:absolute;left:0;right:0;top:100%;background:#fff;border-radius:0 0 16px 16px;padding:6px 10px 10px;box-shadow:0 14px 22px rgba(14,47,120,.2)}
  .d4-top:has(.d4-acct[open]){overflow:visible}
  .d4-top:has(.d4-acct[open]) .d4-top-art{border-radius:18px 0 0 18px}}

/* ---------- shell: sidebar ---------- */
body.d4-on .gb-app{gap:14px}
@media(min-width:900px){body.d4-on .gb-app{grid-template-columns:212px minmax(0,1fr)}}
body.d4-on .gb-side{padding:10px;border-radius:16px;border-color:var(--d4-line);top:12px}
.d4-nav a{display:flex;align-items:center;gap:13px;padding:13px 12px;border-radius:12px;font-weight:700;font-size:15.5px;color:var(--d4-ink);text-decoration:none;margin-bottom:2px}
.d4-nav a svg{width:25px;height:25px;flex:0 0 auto;color:var(--d4-ink)}
.d4-nav a:hover{background:#F0F7FD}
.d4-nav a.on{background:#DCEEFC;color:var(--d4-blue);font-weight:800}
.d4-nav a.on svg{color:var(--d4-blue)}
.d4-tico{margin-top:18px;text-align:center;background:#F4F4F1;border-radius:14px;padding:12px 8px 10px}
.d4-tico img{width:128px;max-width:80%;height:auto;display:block;margin:0 auto 4px}
.d4-tico b{display:block;font-family:var(--d4-head);font-weight:800;font-size:16px;color:var(--d4-ink);line-height:1.1}
.d4-tico span{font-size:12.5px;font-weight:700;color:#4A5F86}

/* ---------- dashboard cards ---------- */
.d4{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.d4-card{background:#fff;border:1px solid var(--d4-line);border-radius:16px;box-shadow:0 1px 2px rgba(14,47,120,.05),0 8px 22px rgba(14,47,120,.08);padding:14px 16px;min-width:0}
.d4-h{font-family:var(--d4-head);font-weight:800;font-size:23px;line-height:1.1;color:var(--d4-ink);margin:0}
.d4-h.s{font-size:18px}
.d4-headrow{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-bottom:10px}
.d4-link{font-weight:800;font-size:14px;color:var(--d4-blue);text-decoration:none;white-space:nowrap}
.d4-link::after{content:' \2192'}
.d4-link:hover{text-decoration:underline}
.d4-row1{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1100px){.d4-row1{grid-template-columns:minmax(0,1fr) 300px}}

/* Your Packages */
.d4-pk{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1280px){.d4-pk{grid-template-columns:minmax(0,1fr) 290px}}
.d4-tiles{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:620px){.d4-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.d4-tile{border:1px solid var(--d4-line);border-radius:14px;padding:8px 8px 10px;text-align:center;text-decoration:none;color:inherit;display:flex;flex-direction:column;min-width:0;background:#fff;transition:transform .15s,box-shadow .15s}
.d4-tile:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(14,47,120,.14)}
.d4-tile .in{border-radius:11px;padding:10px 4px 9px;flex:1}
.d4-tile img{height:62px;width:auto;max-width:90%;display:block;margin:0 auto}
.d4-tile .n{font-family:var(--d4-head);font-weight:800;font-size:44px;line-height:1;margin-top:2px}
.d4-tile .l{font-weight:700;font-size:14.5px;color:var(--d4-ink);line-height:1.2;overflow-wrap:anywhere}
.d4-tile .go{font-weight:800;font-size:13.5px;color:var(--d4-blue);padding-top:9px}
.d4-tile .go::after{content:' \2192'}
.d4-tile.t1 .in{background:#F2FAFD}.d4-tile.t2 .in{background:#FEFAF0}.d4-tile.t3 .in{background:#F0F9FE}.d4-tile.t4 .in{background:#FDFAF3}
.d4-tile.t1 .n,.d4-tile.t3 .n{color:var(--d4-blue)}.d4-tile.t2 .n,.d4-tile.t4 .n{color:var(--d4-orange)}
.d4-est{border:1px solid var(--d4-line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.d4-est h3{font-family:var(--d4-head);font-weight:800;font-size:18px;color:var(--d4-ink);margin:0 0 2px}
.d4-cur{display:flex;align-items:center;gap:12px;min-width:0}
.d4-cur img{width:55px;height:auto;flex:0 0 auto;border-radius:4px}
.d4-cur b{font-family:var(--d4-head);font-weight:800;font-size:clamp(24px,7vw,32px);line-height:1.05;color:var(--d4-ink);white-space:nowrap}
.d4-cur b small{font-size:.58em;font-weight:800}
.d4-est .note{font-size:13px;color:#4A5F86;font-weight:700;margin-left:67px}
.d4-owe{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;background:#FFF4D6;border:1px solid #F5D08A;border-radius:12px;padding:8px 10px;font-size:13.5px;font-weight:800;color:#7A4B00;text-decoration:none}
.d4-owe span:last-child{color:var(--d4-blue);white-space:nowrap}
.d4-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 16px;border-radius:12px;border:0;font-family:var(--d4-head);font-weight:700;font-size:18px;color:#fff;text-decoration:none;cursor:pointer;text-align:center;transition:transform .15s,box-shadow .15s}
.d4-btn::after{content:'\2192';font-family:var(--font-body);font-weight:800}
.d4-btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(14,47,120,.22)}
.d4-btn:focus-visible{outline:3px solid rgba(18,87,214,.45);outline-offset:2px}
.d4-btn.green{background:linear-gradient(180deg,#22B26C,#168A52)}.d4-btn.blue{background:linear-gradient(180deg,#1B7BF2,#0D5FD6)}
.d4-btn.orange{background:linear-gradient(180deg,#FF9A2E,#F2780C)}.d4-btn.violet{background:linear-gradient(180deg,#7C4DF0,#5B2FD0)}
.d4-btn.sm{min-height:40px;font-size:16px}

/* Quick Actions */
.d4-acts{display:grid;gap:9px}
.d4-act{display:flex;align-items:center;gap:13px;padding:10px 14px;border-radius:12px;color:#fff;text-decoration:none;min-height:56px;transition:transform .15s,box-shadow .15s}
.d4-act:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(14,47,120,.22)}
.d4-act:focus-visible{outline:3px solid rgba(18,87,214,.45);outline-offset:2px}
.d4-act svg{width:30px;height:30px;flex:0 0 auto}
.d4-act b{display:block;font-family:var(--d4-head);font-weight:700;font-size:17px;line-height:1.1}
.d4-act small{display:block;font-size:12.5px;font-weight:600;opacity:.95;line-height:1.2}
.d4-act.a1{background:linear-gradient(180deg,#1B7BF2,#0D5FD6)}.d4-act.a2{background:linear-gradient(180deg,#FF9A2E,#F2780C)}
.d4-act.a3{background:linear-gradient(180deg,#22B26C,#168A52)}.d4-act.a4{background:linear-gradient(180deg,#7C4DF0,#5B2FD0)}

/* Shipping Journey */
.d4-pill{display:inline-flex;align-items:center;gap:9px;background:#E3F1FD;border:1px solid #CFE5F8;color:var(--d4-ink);border-radius:999px;padding:6px 16px;font-weight:700;font-size:14.5px;min-width:0}
.d4-pill svg{width:20px;height:20px;color:var(--d4-blue);flex:0 0 auto}
.d4-jmeta{display:flex;gap:6px 12px;flex-wrap:wrap;align-items:center;font-size:13.5px;font-weight:700;color:#4A5F86;margin:-4px 0 10px}
.d4-jmeta select{font:inherit;font-weight:800;color:var(--d4-ink);border:1.5px solid var(--d4-line);border-radius:10px;padding:5px 8px;background:#fff;max-width:100%}
.d4-jmeta .eta{color:#168A52;font-weight:800}
.d4-journey{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 12px;list-style:none;margin:0;padding:0}
.d4-step{position:relative;text-align:center;min-width:0}
.d4-pic{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:3/2;background:#DCEEFC;box-shadow:0 3px 9px rgba(14,47,120,.16)}
.d4-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.d4-pic.code{display:grid;place-items:center;background:linear-gradient(135deg,#FFE7B0,#FFC766);color:#fff}
.d4-pic.code svg{width:44%;height:44%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.d4-step:not(:last-child) .d4-pic::after{content:'';position:absolute}
.d4-arrow{position:absolute;top:0;right:-13px;width:14px;z-index:2;aspect-ratio:auto;height:0;padding-top:calc((100% + 0px) * .333)}
.d4-arrow::before{content:'';position:absolute;right:0;top:100%;transform:translateY(-50%);border:9px solid transparent;border-left:12px solid var(--d4-blue);border-right:0}
.d4-step.todo .d4-arrow::before{border-left-color:#A9B8CC}
.d4-step:last-child .d4-arrow{display:none}
.d4-track{position:relative;height:30px;margin-top:-3px}
.d4-track::before{content:'';position:absolute;top:13px;left:calc(-50% - 6px);width:calc(100% + 12px);height:4px;background:#C5D2E0;border-radius:2px}
.d4-step:first-child .d4-track::before{display:none}
.d4-step.done .d4-track::before,.d4-step.now .d4-track::before{background:#1FA463}
.d4-dot{position:absolute;left:50%;top:1px;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;background:#fff;border:4px solid #A9B8CC;display:grid;place-items:center;color:#fff;z-index:1}
.d4-dot svg{width:15px;height:15px}
.d4-step.done .d4-dot{background:#1FA463;border-color:#1FA463}
.d4-step.now .d4-dot{border-color:var(--d4-blue)}
.d4-step.now .d4-dot::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--d4-blue)}
.d4-step b{display:block;font-weight:800;font-size:13px;letter-spacing:.2px;text-transform:uppercase;color:var(--d4-ink);margin-top:5px;overflow-wrap:anywhere;line-height:1.2}
.d4-step span.ds{display:block;font-size:13px;font-weight:600;color:#33456B;line-height:1.25;margin-top:2px;overflow-wrap:anywhere}
@media(max-width:860px){
  .d4-journey{display:flex;gap:0 12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;margin:0 -4px}
  .d4-step{flex:0 0 158px;scroll-snap-align:start}}
/* phones: the six stages stack as a list (no sideways swiping); the sideways strip stays for 601-860 px */
@media(max-width:600px){
  .d4-journey{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;overflow:visible;scroll-snap-type:none;padding:0;margin:0}
  .d4-step{flex:none;display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:12px;row-gap:0;align-items:center;text-align:left;padding:8px;border-radius:14px;background:#fff;border:1.5px solid var(--d4-line,#D9E9F7)}
  .d4-step .d4-pic{grid-row:1 / span 2}
  .d4-step .d4-arrow,.d4-step .d4-track{display:none}
  .d4-step b{margin-top:0;grid-column:2}.d4-step span.ds{grid-column:2}
  .d4-step.done{border-color:#1FA463}.d4-step.now{border-color:var(--d4-blue,#1257D6);box-shadow:0 0 0 2px rgba(18,87,214,.18)}
  .d4-step.todo{opacity:.82}
}

/* lower row */
.d4-row3{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.d4-row3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1280px){.d4-row3{grid-template-columns:minmax(0,1.35fr) minmax(0,1.65fr) minmax(0,.95fr) minmax(0,1fr)}}
.d4-feat{display:flex;flex-direction:column;gap:8px}
.d4-feat .pic{border-radius:12px;overflow:hidden;background:#EAF5FE}
.d4-feat .pic img{display:block;width:100%;height:auto}
.d4-feat p{margin:0;text-align:center;font-size:14px;font-weight:600;color:#22365F;line-height:1.3}
.d4-feat .d4-btn{margin-top:auto}
.d4-opts{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));flex:1}
@media(max-width:420px){.d4-opts{grid-template-columns:minmax(0,1fr)}}
.d4-opt{display:flex;flex-direction:column;gap:6px;border:1px solid var(--d4-line);border-radius:12px;padding:6px;min-width:0}
.d4-opt img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:9px}
.d4-opt h4{margin:2px 4px 0;font-size:14px;font-weight:800;color:var(--d4-ink);line-height:1.2}
.d4-opt ul{margin:0 4px;padding-left:16px;font-size:12.5px;font-weight:600;color:#22365F;line-height:1.35;flex:1}
.d4-bifm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:8px;align-items:center}
.d4-bifm img{display:block;width:100%;height:auto;border-radius:12px}
.d4-stores{display:grid;gap:5px}
.d4-stores span{background:#fff;border:1px solid var(--d4-line);border-radius:8px;padding:4px 6px;font-weight:800;font-size:12.5px;color:var(--d4-ink);text-align:center;overflow-wrap:anywhere}
.d4-note{font-size:13px;color:#4A5F86;font-weight:700;margin:0}
.d4 .gb-card{border-radius:16px;border-color:var(--d4-line)}
.d4 .gb-h2{font-family:var(--d4-head);font-weight:800;font-size:20px;color:var(--d4-ink);letter-spacing:0}
.d4-jmeta select{width:auto;min-width:150px}
.d4-opt .d4-btn{font-size:14.5px;padding:0 8px;line-height:1.1}
.d4-opt .d4-btn::after{display:none}

/* phones, inner pages (anything but Home): hide the tall illustration so the page itself is on screen */
@media(max-width:899px){body.d4-sub .d4-top-art{display:none}body.d4-sub .d4-top{margin-bottom:10px}}
/* pay bar sits fully above the bottom menu, including the iPhone home-indicator area */
@media(max-width:899px){body.d4-on .gb-paybar{bottom:calc(var(--gb-nav-h,62px));z-index:44}}

.d4-opts:has(.d4-opt:only-child){grid-template-columns:minmax(0,1fr)}

/* UPDATE_056 — customer dashboard home only: image proportions + label wrapping (sizing cleanup, no new artwork) */
/* package icons were squeezed (fixed height, capped width): keep native proportions inside the tile */
body.d4-on #home .d4-tile{padding:6px 5px 10px}
body.d4-on #home .d4-tile .in{padding:10px 2px 9px}
body.d4-on #home .d4-tile img{height:62px;width:100%;max-width:none;object-fit:contain}
body.d4-on #home .d4-tile .l{overflow-wrap:normal;word-break:normal;hyphens:manual;font-size:13.5px}
/* shipping options: boat was cropped to 16:9 and stretched; use its natural ~3:2 proportion at full card width */
body.d4-on #home .d4-opt img{aspect-ratio:215/142;height:auto;object-fit:cover}
/* buy it for me: picture above, retailer names in a wrapped row (no mid-word breaks); picture stays prominent */
body.d4-on #home .d4-bifm{grid-template-columns:minmax(0,1fr);justify-items:center;gap:8px}
body.d4-on #home .d4-bifm img{width:min(100%,190px);height:auto}
body.d4-on #home .d4-stores{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}

/* 057: full saved name in the welcome line */
.d4-who b.long{font-size:17px;line-height:1.2}