/* Customer account uses existing slide-out panel; do not affect the admin panel or cart. */
#accountPanel .customer-account{display:grid;gap:14px;padding:4px 0 24px;min-width:0}
#accountPanel .customer-account[hidden],#accountPanel .customer-account [hidden]{display:none!important}
#accountPanel .customer-account form{display:grid;gap:12px}
#accountPanel .customer-account label{display:grid;gap:6px;font-size:14px;font-weight:600}
#accountPanel .customer-account input,#accountPanel .customer-account select{display:block;box-sizing:border-box;width:100%;max-width:100%;border:1px solid #77695c;background:#28231e;color:#fff;border-radius:8px;padding:12px;font-size:16px}
#accountPanel .customer-account button{padding:11px 12px;border-radius:8px;border:1px solid #dc8631;background:#ee8d31;color:#191410;cursor:pointer;font-weight:700;max-width:100%}
#accountPanel .customer-account button[disabled]{opacity:.55;cursor:not-allowed}
#accountPanel .customer-account .account-nav{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
#accountPanel .customer-account .account-nav button{background:transparent;color:#f0a45c;padding:8px 10px;font-size:13px}
#accountPanel .customer-account .account-nav button[aria-pressed=true]{background:#ee8d31;color:#191410}
#accountPanel .customer-account .account-entry{border:1px solid #625447;border-radius:10px;padding:14px;margin:10px 0;display:grid;gap:8px;min-width:0}
#accountPanel .customer-account .account-entry h4{margin:0;font-size:15px}
#accountPanel .customer-account .account-entry p{margin:0;line-height:1.5;font-size:13px}
#accountPanel .customer-account .account-entry button{justify-self:start;font-size:12px;padding:8px 10px}
#accountPanel #accountMessage{line-height:1.55;color:#e5c6a4}
@media(max-width:600px){#accountPanel .customer-account .account-nav button{flex:1 1 auto}}

/* Email login lives beside legacy phone login; honor the hidden state. */
#accountPanel .account-login-methods { display:flex;gap:8px;margin:12px 0; }
#accountPanel .account-login-methods[hidden],
#accountPanel #accountEmailLoginForm[hidden],
#accountPanel #accountEmailVerifyForm[hidden],
#accountPanel #accountEmailPrivate[hidden] { display:none!important; }
#accountPanel .account-login-methods button { flex:1;min-height:40px;border-radius:8px; }
#accountPanel .account-login-methods button[aria-pressed="true"] { border:1px solid currentColor; }
#accountPanel #accountEmailLoginForm,#accountPanel #accountEmailVerifyForm {display:grid;gap:12px;margin:12px 0;}
#accountPanel #accountEmailLoginForm input,#accountPanel #accountEmailVerifyForm input {width:100%;box-sizing:border-box;min-height:44px;background:#303030;color:#fff;border:1px solid #656565;border-radius:8px;padding:10px;}
#accountPanel #accountEmailLoginForm button,#accountPanel #accountEmailVerifyForm button {min-height:44px;border-radius:8px;}
#accountPanel #accountEmailPrivate {padding:8px 0;}

/* Email customer profile; phone value is contact-only until independently verified. */
#accountPanel #accountEmailProfile {display:grid;gap:10px;margin:12px 0;padding:14px;border:1px solid #625447;border-radius:10px;}
#accountPanel #accountEmailProfile h3 {margin:0;}
#accountPanel #accountEmailProfileForm {display:grid;gap:12px;}
#accountPanel #accountEmailProfileForm[hidden] {display:none!important;}
#accountPanel #accountProfileEmail[readonly] {opacity:.8;cursor:default;}
#accountPanel #accountProfilePhoneVerification {font-size:13px;opacity:.85;margin:0;}
#accountPanel #accountProfileResult {margin:0;line-height:1.5;font-size:13px;}
#accountPanel #accountProfileResult[data-kind="error"] {color:#ffb8b8;}
#accountPanel #accountProfileResult[data-kind="success"] {color:#b6efd0;}

/* Verified-email cabinet: responsive panels, saved addresses and favorites. */
#accountPanel #accountEmailPrivate{min-width:0}
#accountPanel #accountEmailAddresses,#accountPanel #accountEmailFavorites,#accountPanel #accountEmailOrders{padding:14px;margin:12px 0;border:1px solid #625447;border-radius:10px;min-width:0}
#accountPanel #accountEmailAddresses h3,#accountPanel #accountEmailFavorites h3,#accountPanel #accountEmailOrders h3{margin:0 0 12px}
#accountPanel #accountEmailAddressForm{display:grid;gap:10px}
#accountPanel #accountEmailAddressForm .email-address-default{display:flex;align-items:center;gap:8px}
#accountPanel #accountEmailAddressDefault{width:auto;min-height:18px;accent-color:#ee8d31}
#accountPanel #accountEmailAddressCancel{background:transparent;color:#ee8d31}
#accountPanel #accountEmailAddressesStatus,#accountPanel #accountEmailCollectionsStatus{font-size:13px;line-height:1.45}
#accountPanel #accountEmailAddressesStatus[data-kind="error"],#accountPanel #accountEmailCollectionsStatus[data-kind="error"]{color:#ffb8b8}
#accountPanel #accountEmailAddressesStatus[data-kind="success"],#accountPanel #accountEmailCollectionsStatus[data-kind="success"]{color:#b6efd0}
#accountPanel #accountEmailFavoritesList,#accountPanel #accountEmailOrdersList{display:grid;gap:10px}
#accountPanel #accountEmailFavoritesList .account-entry,#accountPanel #accountEmailOrdersList .account-entry{margin:0}
.email-favorite-toggle{cursor:pointer;max-width:100%;font-size:13px;border:1px solid #ed8b29;border-radius:8px;padding:8px 10px;background:transparent;color:#ed8b29}
.email-favorite-toggle[aria-pressed="true"]{background:#ed8b29;color:#1c1712}
#checkoutSavedAddressWrap[hidden]{display:none!important}
#checkoutSavedAddress{width:100%;box-sizing:border-box}
@media(max-width:600px){
 #accountPanel #accountEmailAddresses,#accountPanel #accountEmailFavorites,#accountPanel #accountEmailOrders,#accountPanel #accountEmailProfile{padding:12px}
 #accountPanel .email-favorite-toggle{min-height:40px}
}

/* Premium email cabinet defaults. Published builder CSS may override these values. */
#accountPanel #accountEmailPrivate{--cabinet-tab-gap:8px;--cabinet-tab-radius:10px;--cabinet-tab-bg:#29221e;--cabinet-tab-active-bg:#ee8d31;--cabinet-tab-color:#f5e9df;--cabinet-tab-active-color:#1d1712;--cabinet-body-size:16px;--cabinet-label-size:14px;--cabinet-button-size:15px;--cabinet-tab-size:15px;display:grid;gap:18px;font-size:var(--cabinet-body-size);line-height:1.55}
#accountPanel .account-email-identity{font-size:.92em;line-height:1.5;color:#e6d3c2;overflow-wrap:anywhere}
#accountPanel .account-email-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cabinet-tab-gap);min-width:0}
#accountPanel .account-email-tabs[hidden]{display:none!important}
#accountPanel .customer-account .account-email-tabs button{font-size:var(--cabinet-tab-size);line-height:1.2;min-width:0;min-height:46px;background:var(--cabinet-tab-bg);color:var(--cabinet-tab-color);border:1px solid #67584b;border-radius:var(--cabinet-tab-radius);padding:11px 5px;transition:background-color .15s,border-color .15s}
#accountPanel .customer-account .account-email-tabs button[aria-selected="true"]{background:var(--cabinet-tab-active-bg);color:var(--cabinet-tab-active-color);border-color:var(--cabinet-tab-active-bg)}
#accountPanel .customer-account .account-email-tabs button:focus-visible{outline:3px solid #fff;outline-offset:2px}
#accountPanel #accountEmailPrivate[data-tabs-ready="true"] [data-email-pane]:not([data-tab-active="true"]){display:none!important}
#accountPanel #accountEmailPrivate[data-tabs-ready="true"] [data-email-pane][hidden]{display:none!important}
#accountPanel #accountEmailPrivate[data-tabs-ready="true"] [data-email-pane][data-tab-active="true"]{margin:0;min-width:0}
#accountPanel #accountEmailPrivate [data-email-pane] h3{font-size:1.15em;line-height:1.35;margin:0 0 15px}
#accountPanel #accountEmailPrivate [data-email-pane] label{font-size:var(--cabinet-label-size);line-height:1.4}
#accountPanel #accountEmailPrivate [data-email-pane] input,
#accountPanel #accountEmailPrivate [data-email-pane] select{min-height:46px}
#accountPanel #accountEmailPrivate [data-email-pane] button{font-size:var(--cabinet-button-size);min-height:42px}
#accountPanel #accountEmailPrivate [data-email-pane] p,
#accountPanel #accountEmailPrivate [data-email-pane] small{font-size:.9em}
#accountPanel #accountEmailPrivate .account-entry p{font-size:.9em}
#accountPanel #accountEmailLogout{background:transparent;color:#f0a45c;border-color:#9d7956;justify-self:start;font-size:var(--cabinet-button-size)}
@media(max-width:760px){
 #accountPanel #accountEmailPrivate{gap:14px}
 #accountPanel .account-email-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:max(6px,var(--cabinet-tab-gap))}
 #accountPanel .customer-account .account-email-tabs button{min-height:44px;padding:10px 4px}
 #accountPanel #accountEmailPrivate [data-email-pane] h3{font-size:1.12em}
}
@media(max-width:390px){
 #accountPanel .account-email-identity{font-size:.85em}
 #accountPanel .customer-account .account-email-tabs button{font-size:max(13px,calc(var(--cabinet-tab-size) - 1px))}
}

/* Five-screen email cabinet: welcome/dashboard and expandable order details. */
#accountPanel #accountEmailPrivate .account-email-tabs{grid-template-columns:repeat(5,minmax(0,1fr))}
#accountPanel .account-email-home{display:grid;gap:18px}
#accountPanel .account-home-welcome{background:linear-gradient(120deg,#33241d 0%,#241d1a 75%);border:1px solid #69503d;border-radius:14px;padding:22px}
#accountPanel .account-home-kicker{font-size:12px!important;letter-spacing:.11em;color:#ec9c54;font-weight:750;margin:0 0 12px}
#accountPanel .account-home-welcome h3{font-size:clamp(22px,2.2vw,30px);margin:0 0 10px;line-height:1.25}
#accountPanel .account-home-welcome p:last-child{margin:0;color:#e7d8cc}
#accountPanel .account-home-last{background:#29231e;border:1px solid #625447;border-radius:12px;padding:18px}
#accountPanel .account-home-last h3{margin:0 0 12px;font-size:1.15em}
#accountPanel .account-home-last p{margin:8px 0;color:#e4d8cf}
#accountPanel .account-home-order-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
#accountPanel .customer-account .account-home-order-actions button{flex:1 1 160px}
#accountPanel .account-favorite-image{height:136px;width:100%;max-width:300px;object-fit:cover;border-radius:9px}
#accountPanel .account-order-details{min-width:0;border-top:1px solid #625447;padding-top:12px}
#accountPanel .account-order-details summary{cursor:pointer;color:#ffa65c;font-weight:700}
#accountPanel .account-order-lines{display:grid;gap:6px;margin-top:10px}
#accountPanel .account-order-line{display:flex;align-items:center;justify-content:space-between;gap:12px}
#accountPanel .account-order-line strong{white-space:nowrap}
@media(max-width:760px){
 #accountPanel #accountEmailPrivate .account-email-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
 #accountPanel .account-home-welcome{padding:16px}
}

/* Configurable icon glyphs; plain Unicode avoids external font dependencies. */
#accountPanel #accountEmailTabs button[data-account-icon]::before{display:block;font-size:22px;line-height:1;margin-bottom:6px;font-weight:400}
#accountPanel #accountEmailTabs button[data-account-icon="home"]::before{content:"⌂"}
#accountPanel #accountEmailTabs button[data-account-icon="user"]::before{content:"♙"}
#accountPanel #accountEmailTabs button[data-account-icon="pin"]::before{content:"⌖"}
#accountPanel #accountEmailTabs button[data-account-icon="heart"]::before{content:"♡"}
#accountPanel #accountEmailTabs button[data-account-icon="receipt"]::before{content:"▤"}
#accountPanel #accountEmailTabs button[data-account-icon="none"]::before{display:none}
#accountPanel #accountEmailAddressForm textarea{width:100%;box-sizing:border-box;min-height:78px;resize:vertical;border-radius:var(--cabinet-input-radius,8px);padding:12px;border:1px solid #77695c;background:#28231e;color:#fff;font:inherit}
#accountPanel #accountEmailAddressForm .account-address-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#accountPanel #accountEmailAddressForm .account-address-detail-grid input{min-width:0}
@media(max-width:390px){
 #accountPanel #accountEmailAddressForm .account-address-detail-grid{grid-template-columns:1fr}
}

/* Visual parity, readable spacing and dark default for verified email cabinet.
   Published canvas colors are applied separately from the account appearance API. */
#accountPanel:has(#accountEmailPrivate:not([hidden])){background:#1d1815;color:#f5f1ec}
#accountPanel #accountEmailPrivate{gap:14px;line-height:1.55}
#accountPanel #accountEmailPrivate .account-email-tabs{margin:2px 0 4px}
#accountPanel #accountEmailPrivate .account-email-identity{font-size:max(14px,.9em);margin:0}
#accountPanel #accountEmailPrivate .account-email-home{gap:14px}
#accountPanel #accountEmailPrivate .account-home-welcome{padding:clamp(16px,2vw,22px)}
#accountPanel #accountEmailPrivate .account-home-welcome h3{font-size:clamp(22px,2.4vw,30px)}
#accountPanel #accountEmailPrivate .account-home-last{padding:18px}
#accountPanel #accountEmailPrivate .account-home-last p{font-size:max(14px,.95em)}
#accountPanel #accountEmailPrivate [data-email-pane] p{font-size:max(14px,.95em);line-height:1.55}
#accountPanel #accountEmailPrivate [data-email-pane] h3{font-size:clamp(18px,1.5em,25px)}
#accountPanel #accountEmailPrivate .account-email-tabs button{overflow-wrap:anywhere}
#accountPanel #accountEmailPrivate #accountEmailLogout{min-height:40px;margin-top:4px}
@media(max-width:760px){
 #accountPanel #accountEmailPrivate{gap:12px}
 #accountPanel #accountEmailPrivate .account-home-welcome{padding:16px}
}


/* Narrow account drawers may be shown on a wide desktop: respond to the
   account's own usable width, not the phone/desktop viewport breakpoint. */
#accountPanel #accountEmailPrivate{container-type:inline-size}
@container (max-width: 620px){
 #accountPanel #accountEmailPrivate .account-email-tabs{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(3px,1.1cqi,7px);
  min-width:0;
 }
 #accountPanel #accountEmailPrivate .account-email-tabs button{
  font-size:clamp(10px,2.85cqi,13px);
  padding:9px 1px;
  min-width:0;
  min-height:64px;
  white-space:nowrap;
  overflow:hidden;
  overflow-wrap:normal;
  text-overflow:clip;
  line-height:1.1;
 }
 #accountPanel #accountEmailTabs button[data-account-icon]::before{
  font-size:clamp(16px,4.5cqi,20px);margin-bottom:5px;
 }
 /* The desktop column count from the published builder is retained in broad
    modals. In narrow panels it becomes one horizontal image/content card. */
 #accountPanel #accountEmailFavoritesList{
  grid-template-columns:minmax(0,1fr)!important;
 }
 #accountPanel #accountEmailFavoritesList .account-entry:has(> .account-favorite-image){
  display:grid;
  grid-template-columns:minmax(84px,35%) minmax(0,1fr);
  column-gap:12px;
  row-gap:8px;
  align-content:start;
 }
 #accountPanel #accountEmailFavoritesList .account-entry > .account-favorite-image{
  grid-column:1;grid-row:1 / span 5;
  width:100%;max-width:none;
  height:100%!important;
  min-height:130px;
  max-height:210px;
  object-fit:cover;
  align-self:stretch;
 }
 #accountPanel #accountEmailFavoritesList .account-entry:has(> .account-favorite-image) > :not(img){
  grid-column:2;
  min-width:0;
  overflow-wrap:anywhere;
 }
 #accountPanel #accountEmailFavoritesList .account-entry button{
  width:100%;
  justify-self:stretch;
  white-space:normal;
 }
}
@container (max-width: 350px){
 /* Extremely narrow drawers scroll the tab strip rather than breaking words. */
 #accountPanel #accountEmailPrivate .account-email-tabs{
  grid-template-columns:repeat(5,minmax(66px,1fr));
  overflow-x:auto;overscroll-behavior-inline:contain;
 }
}


/* Full-viewport customer cabinet on phones; desktop keeps its published layout. */
@media (max-width:760px){
 html.guru-account-open,
 html.guru-account-open body{overflow:hidden;overscroll-behavior:none}
 #accountPanel:not([hidden]){
  position:fixed!important;
  inset:0!important;
  transform:none!important;
  width:100%!important;
  min-width:0!important;
  max-width:100vw!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  border-radius:0!important;
  box-sizing:border-box!important;
  box-shadow:none!important;
  padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)!important;
  display:flex!important;
  flex-direction:column;
  overflow:hidden!important;
  overscroll-behavior:contain;
 }
 #accountPanel>.panel-title{
  position:relative;
  flex:none;
  min-height:54px;
  padding:var(--account-mobile-header-top,12px) max(var(--account-mobile-header-side,16px),env(safe-area-inset-right,0px)) var(--account-mobile-header-bottom,12px) max(var(--account-mobile-header-side,16px),env(safe-area-inset-left,0px))!important;
  margin:0;
  z-index:1;
 }
 #accountPanel>.panel-title h2{min-width:0;margin:0}
 #accountPanel #accountClose{flex:none;min-width:44px;min-height:44px}
 #accountPanel>.customer-account{
  display:block;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:12px max(var(--account-mobile-content-padding,16px),env(safe-area-inset-right,0px)) 24px max(var(--account-mobile-content-padding,16px),env(safe-area-inset-left,0px));
 }
 #accountPanel #accountEmailPrivate{min-width:0}
 #accountPanel #accountEmailTabs{width:100%;min-width:0}
 #accountPanel #accountEmailTabs button{min-width:0;overflow-wrap:anywhere}
}

/* Keep the authenticated email identity available to JS, not displayed in the cabinet. */
#accountPanel .account-email-identity[hidden],#accountPanel #accountMessage:empty{display:none!important}

/* Saved-address form: three concise fields stay in one row even on narrow phones. */
#accountPanel #accountEmailAddressForm .account-address-detail-grid{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:clamp(5px,1.6vw,10px);
}
#accountPanel #accountEmailAddressForm .account-address-detail-grid label{min-width:0;overflow-wrap:normal;font-size:clamp(11px,2.9vw,14px)}
#accountPanel #accountEmailAddressForm .account-address-detail-grid input{width:100%;min-width:0;padding-inline:clamp(6px,1.9vw,12px)}
@media(max-width:390px){
 #accountPanel #accountEmailAddressForm .account-address-detail-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}