/* MARCO COFFEE V20 — Customer account, charcoal & antique gold.
   Overlays previous account styles without changing storefront or admin. */
#ordersDialog.v20-account-dialog{width:min(1200px,calc(100vw - 32px))!important;max-width:1200px!important;height:min(840px,calc(100dvh - 38px))!important;max-height:calc(100dvh - 38px)!important;padding:0!important;margin:auto!important;background:#f7f7f7!important;border:0!important;border-radius:19px!important;overflow:hidden!important;box-shadow:0 26px 105px rgba(0,0,0,.26)!important}
#ordersDialog .v20-account-inner{display:block!important;width:100%!important;max-width:none!important;height:100%!important;min-height:0!important;padding:0!important;overflow:hidden!important;box-sizing:border-box!important}
#ordersDialog .v20-account-layout{display:grid;grid-template-columns:245px minmax(0,1fr);width:100%;height:100%;min-height:0;overflow:hidden}
#ordersDialog .v20-account-side{display:flex;flex-direction:column;min-height:0;min-width:0;background:#fff;border-right:1px solid #eae7e1;padding:29px 16px 18px}
#ordersDialog .v20-side-brand{min-height:56px;display:flex;align-items:flex-start;margin:0 11px 18px}
#ordersDialog .v20-side-brand img{width:175px;max-height:62px;object-fit:contain;object-position:left center}
#ordersDialog .v20-side-kicker{color:#a27732;font:800 10px/1.2 'Segoe UI',Arial,sans-serif;letter-spacing:2px;margin:0 12px 18px}
#ordersDialog .v20-account-person{display:flex;align-items:center;gap:10px;background:#f9f7f2;border:1px solid #eee5d6;border-radius:13px;padding:13px 10px;margin:0 2px 18px;min-width:0}
#ordersDialog .v20-account-person>div{min-width:0;display:grid;gap:3px}
#ordersDialog .v20-account-person strong{font:750 12px/1.3 'Segoe UI',Arial,sans-serif;color:#282828;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}
#ordersDialog .v20-account-person small{font-size:10px;color:#7f7a73;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}
#ordersDialog .v20-avatar{display:grid;place-items:center;flex:0 0 36px;height:36px;background:#292b2e;color:#d9b16a;border-radius:50%;font:800 17px Georgia,serif}
#ordersDialog .v20-account-nav{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:4px!important;min-width:0!important;border:0!important;padding:0!important;margin:0!important}
#ordersDialog .v20-account-nav .account-tab{display:flex!important;align-items:center!important;text-align:left!important;gap:12px!important;min-height:44px!important;padding:10px 13px!important;width:100%!important;white-space:normal!important;border:1px solid transparent!important;border-radius:10px!important;background:transparent!important;color:#454545!important;font:650 13px/1.35 'Segoe UI',Arial,sans-serif!important;box-shadow:none!important}
#ordersDialog .v20-account-nav .account-tab>span{font-size:19px;font-weight:600;line-height:1;width:21px;text-align:center;color:#6d6860;flex:0 0 21px}
#ordersDialog .v20-account-nav .account-tab:hover{background:#f5f2ed!important;color:#211f1b!important}
#ordersDialog .v20-account-nav .account-tab.active{background:#292b2e!important;color:#fff!important;border-color:#292b2e!important;box-shadow:inset 3px 0 #b38a43!important}
#ordersDialog .v20-account-nav .account-tab.active>span{color:#dfb878}
#ordersDialog .v20-side-bottom{margin-top:auto;padding:15px 7px 0;display:grid;gap:11px;border-top:1px solid #ece9e4}
#ordersDialog .v20-side-logout{background:transparent;border:0;text-align:left;padding:8px;color:#706963;cursor:pointer;font-size:12px;font-weight:650}
#ordersDialog .v20-side-logout:hover{color:#a37321}
#ordersDialog .v20-side-bottom a{color:#91651b;text-decoration:underline;font-size:12px}
#ordersDialog .v20-account-main{min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;padding:33px clamp(20px,3vw,45px) 50px;background:#f7f7f7;scrollbar-color:#cabca5 transparent}
#ordersDialog .v20-account-heading{margin:0 0 24px;padding-right:43px}
#ordersDialog .v20-account-heading>span{font-size:10px;font-weight:850;letter-spacing:2.1px;color:#986e27}
#ordersDialog .v20-account-heading h2{font:700 clamp(27px,2.9vw,37px)/1.17 Georgia,'Times New Roman',serif!important;color:#252528;margin:7px 0 7px}
#ordersDialog .v20-account-heading p{margin:0;color:#77726b;font-size:13px;line-height:1.55}
#ordersDialog .v20-account-close{position:absolute!important;top:20px!important;right:21px!important;z-index:15;display:grid!important;place-items:center!important;width:37px;height:37px;border-radius:50%;background:#fff!important;color:#292b2e!important;box-shadow:0 2px 12px #0001;border:1px solid #ece8e0;font-size:23px}
#ordersDialog .account-section[hidden]{display:none!important}
#ordersDialog .v20-orders-list{display:grid;gap:16px}
#ordersDialog .v20-order-card{background:#fff;border:1px solid #e8e7e5;border-radius:18px;overflow:hidden;box-shadow:0 3px 17px #00000006;padding:21px 23px}
#ordersDialog .v20-order-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) auto auto;gap:16px;align-items:center;padding-bottom:14px;border-bottom:1px solid #ebe8e4}
#ordersDialog .v20-order-top small{display:block;color:#8b8883;font-size:10px;margin-bottom:4px}
#ordersDialog .v20-order-top strong{font-size:13px;color:#292b2e;overflow-wrap:anywhere}
#ordersDialog .v20-order-number{color:#90651d;font-weight:750;font-size:13px}
#ordersDialog .v20-order-amount{white-space:nowrap;color:#8d621e!important;font-size:16px!important}
#ordersDialog .v20-detail-link{color:#292b2e;text-decoration:none;border:1px solid #cfcac2;border-radius:30px;padding:10px 14px;white-space:nowrap;font-weight:700;font-size:12px}
#ordersDialog .v20-detail-link:hover{background:#292b2e;color:white}
#ordersDialog .v20-status-row{display:flex;align-items:center;gap:9px;padding-top:14px;flex-wrap:wrap}
#ordersDialog .v20-order-status{display:inline-flex;align-items:center;gap:7px;color:#90631b;font-size:12px;font-weight:750}
#ordersDialog .v20-order-status::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
#ordersDialog .v20-order-status.success{color:#16804e}
#ordersDialog .v20-order-status.cancelled{color:#ae4040}
#ordersDialog .v20-order-payment{margin-left:auto;font-size:11px;color:#85807a}
#ordersDialog .v20-order-products{margin:10px 0 0;color:#5d5d5b;font-size:12px;line-height:1.55}
#ordersDialog .v20-order-reorder{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-top:15px;padding:10px 15px;border:1px solid #aa8d5b;border-radius:28px;background:#fff;color:#79541b;font-size:12px;font-weight:750;cursor:pointer}
#ordersDialog .v20-order-reorder:hover{background:#fbf5eb}
#ordersDialog .v20-order-reward{margin-top:10px;font-size:12px;color:#95691e;font-weight:700}
#ordersDialog .v20-empty-state{background:#fff;border:1px solid #eae7e3;border-radius:18px;text-align:center;padding:45px 28px;display:grid;justify-items:center;gap:10px}
#ordersDialog .v20-state-icon{font-size:34px;color:#9e7025;background:#f8f2e6;width:68px;height:68px;border-radius:50%;display:grid;place-items:center}
#ordersDialog .v20-empty-state h3{margin:5px 0 0;font:700 23px/1.3 Georgia,serif;color:#2a2927}
#ordersDialog .v20-empty-state p{margin:0;max-width:520px;line-height:1.6;font-size:13px;color:#777}
#ordersDialog .v20-content-card{background:#fff;border:1px solid #e9e5e0;border-radius:17px;padding:24px;max-width:100%}
#ordersDialog .v20-content-card h3{font:700 23px Georgia,serif;margin:0 0 9px}
#ordersDialog .v20-content-card>p{margin:0 0 22px;color:#777;font-size:13px;line-height:1.6}
#ordersDialog .v20-favorite-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
#ordersDialog .v20-favorite-card{display:grid;grid-template-columns:68px minmax(0,1fr);gap:12px;align-items:center;padding:11px;border:1px solid #eae7e0;border-radius:12px;min-width:0}
#ordersDialog .v20-favorite-card img,#ordersDialog .v20-favorite-img{width:68px;height:72px;object-fit:contain;border-radius:9px;background:#faf9f6;display:grid;place-items:center}
#ordersDialog .v20-favorite-card strong{font-size:13px;display:block;line-height:1.3}
#ordersDialog .v20-favorite-card small{font-size:12px;color:#9b701f;font-weight:800;display:block;margin:4px 0}
#ordersDialog .v20-favorite-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#ordersDialog .v20-favorite-actions button{font-size:11px;font-weight:700;padding:7px 9px;background:#fff;border:1px solid #ddd;border-radius:8px;cursor:pointer}
#ordersDialog .v20-favorite-actions button:first-child{background:#936719;color:#fff;border-color:#936719}
#ordersDialog .v20-coming-soon{margin-top:8px;padding:7px 13px;background:#f8f1e5;color:#916821;border:1px solid #e8d9bf;border-radius:20px;font-size:12px;font-weight:700}
#ordersDialog .v20-notification-form{max-width:680px}
#ordersDialog .v20-setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid #ede7dd;border-radius:12px;padding:19px;margin-bottom:12px;cursor:pointer}
#ordersDialog .v20-setting-row b{display:block;font-size:13px;margin-bottom:7px}
#ordersDialog .v20-setting-row small{font-size:12px;color:#777;line-height:1.5;display:block}
#ordersDialog .v20-setting-row input{accent-color:#976a20;width:19px;height:19px;flex:0 0 auto}
#ordersDialog .v20-notification-form .account-gold-button{max-width:260px;margin-top:14px}
#ordersDialog .star-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#ordersDialog .account-form-layout{grid-template-columns:repeat(2,minmax(0,1fr))}
#ordersDialog button:focus-visible,#ordersDialog a:focus-visible{outline:2px solid #a17832!important;outline-offset:3px}
/* Decorative favorite heart has its own action; catalog card opens detail elsewhere. */
.compact-product-card{position:relative}
.compact-product-card .v20-fav-toggle{position:absolute;top:10px;right:10px;width:31px;height:31px;padding:0;display:grid;place-items:center;border:1px solid #e9ddc8;border-radius:50%;background:#fff;color:#8c7963;font-size:21px;z-index:2;cursor:pointer;box-shadow:0 2px 8px #00000009}
.compact-product-card .v20-fav-toggle.active{color:#a26f21;background:#fff5e3;border-color:#d3ae74}
@media(max-width:1000px){#ordersDialog .v20-account-layout{grid-template-columns:215px minmax(0,1fr)}#ordersDialog .v20-account-main{padding:28px 22px 36px}#ordersDialog .v20-order-top{grid-template-columns:1fr 1fr;row-gap:11px}#ordersDialog .v20-detail-link{justify-self:end}#ordersDialog .v20-favorite-list{grid-template-columns:1fr}}
@media(max-width:760px){
 #ordersDialog.v20-account-dialog{width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important}
 #ordersDialog .v20-account-layout{display:flex;flex-direction:column;overflow:hidden}
 #ordersDialog .v20-account-side{flex:0 0 auto;padding:12px 14px 0;border-right:0;border-bottom:1px solid #e8e2d8}
 #ordersDialog .v20-side-brand,#ordersDialog .v20-side-kicker,#ordersDialog .v20-side-bottom{display:none!important}
 #ordersDialog .v20-account-person{margin:0 43px 10px 0;padding:7px 10px;max-width:340px}
 #ordersDialog .v20-account-nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible!important;padding:0 0 9px!important;gap:5px!important}
 #ordersDialog .v20-account-nav .account-tab{white-space:normal!important;min-height:37px!important;width:100%!important;padding:8px 8px!important;font-size:11px!important;border-radius:9px!important;text-align:left!important}
 #ordersDialog .v20-account-nav .account-tab>span{font-size:16px;width:18px;flex-basis:18px}
 #ordersDialog .v20-account-main{flex:1;min-height:0;padding:18px 15px 40px}
 #ordersDialog .v20-account-heading{margin-bottom:18px}
 #ordersDialog .v20-account-heading h2{font-size:29px!important}
 #ordersDialog .v20-account-close{top:14px!important;right:12px!important}
 #ordersDialog .star-grid,#ordersDialog .account-form-layout{grid-template-columns:1fr!important}
 #ordersDialog .v20-favorite-list{grid-template-columns:1fr}
}
@media(max-width:430px){#ordersDialog .v20-order-top{grid-template-columns:1fr 1fr;gap:12px}#ordersDialog .v20-order-card{padding:16px}#ordersDialog .v20-order-top>div:first-child{grid-column:1/-1}#ordersDialog .v20-order-top>div:nth-child(2){grid-column:1}#ordersDialog .v20-order-top>div:nth-child(3){grid-column:2}#ordersDialog .v20-detail-link{grid-column:1/-1;justify-self:start}#ordersDialog .v20-order-payment{margin-left:0;width:100%}#ordersDialog .v20-content-card{padding:17px}}
@media(prefers-reduced-motion:reduce){#ordersDialog *, .v20-fav-toggle{transition:none!important;animation:none!important}}


/* v21-modal-tight merged into v20-account.css */

:root{
  --v21-modal-width: min(590px, calc(100vw - 28px));
  --v21-modal-padding-x: 20px;
  --v21-modal-padding-top: 20px;
  --v21-modal-padding-bottom: 12px;
}

body #optionDialog{
  width: var(--v21-modal-width) !important;
  max-width: var(--v21-modal-width) !important;
  height: min(830px, calc(100dvh - 26px)) !important;
  max-height: calc(100dvh - 26px) !important;
  border-radius: 20px !important;
}
body #optionDialog .option-modal-inner{
  padding: 0 !important;
}
body #optionDialog .v19-modal-scroll{
  padding: var(--v21-modal-padding-top) var(--v21-modal-padding-x) var(--v21-modal-padding-bottom) !important;
}
body #optionDialog .v17-detail-grid{
  gap: 12px !important;
  padding-bottom: 6px !important;
}
body #optionDialog .option-hero-image{
  height: 168px !important;
  min-height: 168px !important;
  max-height: 168px !important;
  margin-bottom: 12px !important;
  padding: 10px !important;
}
body #optionDialog .option-hero-image img{max-height:150px !important;}
body #optionDialog .option-modal-header{
  gap: 8px !important;
  margin-bottom: 6px !important;
  padding-right: 42px !important;
}
body #optionDialog .option-modal-header h2{font-size: clamp(22px, 2.1vw, 28px) !important;}
body #optionDialog .option-modal-header strong{font-size:18px !important;}
body #optionDialog .option-product-description{font-size:13px !important;margin:4px 2px 0 !important;}
body #optionDialog .v17-option-heading{padding-bottom:10px !important;margin-top:0 !important;}
body #optionDialog .option-group{margin-bottom:10px !important;}
body #optionDialog .option-group legend{font-size:14px !important;}
body #optionDialog .option-choice-grid,
body #optionDialog .option-choice-grid:has(label:nth-child(3)){
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
body #optionDialog .option-choice{
  min-height: 42px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
}
body #optionDialog .v17-recommendations{
  margin-top: 8px !important;
  padding-top: 15px !important;
}
body #optionDialog .v17-recommendation-header{
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: start !important;
  justify-content: start !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
}
body #optionDialog .v17-recommendation-header h3{font-size: 20px !important;}
body #optionDialog .v17-recommendation-header small{
  display: block !important;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}
body #optionDialog .v17-recommendation-list{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}
body #optionDialog .v17-rec-item{
  grid-template-columns: 22px 58px minmax(0,1fr) !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  min-height: 78px !important;
}
body #optionDialog .v17-rec-check > span{width: 18px !important; height: 18px !important;}
body #optionDialog .v17-rec-photo{width: 58px !important; height: 58px !important;}
body #optionDialog .v17-rec-text{gap: 3px !important;}
body #optionDialog .v17-rec-text b{font-size: 13px !important;line-height:1.22 !important;}
body #optionDialog .v17-rec-text small{font-size: 11px !important;line-height:1.35 !important;gap:3px !important;}
body #optionDialog .v17-rec-text small em{font-size: 12px !important;}
body #optionDialog .option-modal-footer{
  gap: 10px !important;
  padding: 12px 18px max(12px, env(safe-area-inset-bottom)) !important;
  grid-template-columns: minmax(0,1fr) 112px 175px !important;
}
body #optionDialog .option-modal-footer .option-order-total{
  min-width: 0 !important;
  gap: 2px !important;
}
body #optionDialog .option-modal-footer .option-order-total > span{font-size: 11px !important;}
body #optionDialog .option-modal-footer .option-order-total strong{font-size: 18px !important;}
body #optionDialog .option-modal-footer .qty-controls{width: 112px !important; flex-basis: 112px !important; height: 44px !important;}
body #optionDialog .option-modal-footer #optionAddBtn{width: 175px !important; flex-basis: 175px !important; min-height: 44px !important; font-size: 13px !important;}

@media (max-width: 880px){
  :root{ --v21-modal-width: min(560px, calc(100vw - 20px)); }
}

@media (max-width: 640px){
  body #optionDialog,
  body #checkoutDialog,
  body #orderSuccessDialog{
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  body #optionDialog .v19-modal-scroll{
    padding: 18px 14px 10px !important;
  }
  body #optionDialog .option-hero-image{
    height: 146px !important;
    min-height: 146px !important;
    max-height: 146px !important;
    padding: 8px !important;
  }
  body #optionDialog .option-hero-image img{max-height:130px !important;}
  body #optionDialog .option-modal-header h2{font-size: 22px !important;}
  body #optionDialog .option-choice-grid,
  body #optionDialog .option-choice-grid:has(label:nth-child(3)){
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body #optionDialog .v17-recommendation-header small{display:none !important;}
  body #optionDialog .v17-rec-item{
    grid-template-columns: 20px 50px minmax(0,1fr) !important;
    gap: 8px !important;
    min-height: 70px !important;
    padding: 8px 9px !important;
  }
  body #optionDialog .v17-rec-photo{width: 50px !important; height: 50px !important;}
  body #optionDialog .option-modal-footer{
    grid-template-columns: minmax(0,1fr) 108px !important;
    gap: 10px !important;
    padding: 11px 14px max(11px, env(safe-area-inset-bottom)) !important;
  }
  body #optionDialog .option-modal-footer .option-order-total{grid-column: 1 !important; grid-row:1 !important;}
  body #optionDialog .option-modal-footer .qty-controls{grid-column: 2 !important; grid-row:1 !important; width:108px !important;}
  body #optionDialog .option-modal-footer #optionAddBtn{grid-column: 1 / -1 !important; grid-row:2 !important; width: 100% !important;}
}