/* PickChoice Mobile Header Actions V1
 * Purpose: make coupon, notification, cart, and profile instantly recognizable on mobile.
 * Scoped to storefront mobile header only; desktop layout remains controlled by site-header-v1.css.
 */
.pcx-mobile-action-label{display:none}
.pcx-mobile-coupon-icon{display:none}
.pcx-user-profile-icon{display:none}

@media(max-width:860px){
  .pcx-header-inner{grid-template-rows:70px 38px}
  .pcx-header-actions{gap:5px}
  .pcx-header-actions>.pcx-mobile-action{
    position:relative;
    width:46px;
    height:50px;
    box-sizing:border-box;
    margin:0;
    padding:5px 2px 4px;
    display:grid!important;
    grid-template-rows:23px 11px;
    place-items:center;
    align-content:center;
    gap:1px;
    overflow:visible;
    border:1px solid rgba(255,255,255,.085);
    border-radius:14px;
    background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.012));
    color:#aaa399;
    box-shadow:inset 0 1px rgba(255,255,255,.018);
    text-decoration:none;
  }
  .pcx-header-actions>.pcx-mobile-action:hover,
  .pcx-header-actions>.pcx-mobile-action.is-active{
    color:#e7d2a2;
    border-color:rgba(207,174,106,.30);
    background:linear-gradient(180deg,rgba(207,174,106,.10),rgba(207,174,106,.035));
  }
  .pcx-header-actions>.pcx-mobile-action svg{
    width:20px;
    height:20px;
    margin:0;
    stroke:currentColor;
    stroke-width:1.55;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .pcx-header-actions>.pcx-mobile-coupon{
    color:#ddc692;
    border-color:rgba(207,174,106,.30);
    background:linear-gradient(180deg,rgba(207,174,106,.11),rgba(207,174,106,.035));
  }
  .pcx-header-actions>.pcx-mobile-coupon .pcx-coupon-desktop-icon{display:none}
  .pcx-header-actions>.pcx-mobile-coupon .pcx-mobile-coupon-icon{display:block}
  .pcx-header-actions>.pcx-mobile-coupon>span{
    display:block!important;
    line-height:1!important;
  }
  .pcx-header-actions>.pcx-mobile-coupon small{display:none!important}
  .pcx-header-actions>.pcx-mobile-coupon strong{
    display:block;
    margin:0!important;
    color:#d8bf88;
    font-size:8px!important;
    font-weight:750;
    line-height:10px;
    letter-spacing:-.02em;
  }
  .pcx-header-actions>.pcx-mobile-notification{display:grid!important}
  .pcx-header-actions>.pcx-mobile-profile{
    justify-content:center;
    max-width:none;
    font-size:0;
  }
  .pcx-header-actions>.pcx-mobile-profile>.pcx-user-status-dot{display:none}
  .pcx-header-actions>.pcx-mobile-profile .pcx-user-profile-icon{
    display:block;
    width:20px;
    height:20px;
  }
  .pcx-header-actions>.pcx-mobile-action .pcx-mobile-action-label{
    position:static;
    width:auto;
    height:auto;
    min-width:0;
    margin:0;
    padding:0;
    display:block;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    color:#8d867c;
    font:750 7px/10px system-ui,-apple-system,BlinkMacSystemFont,"Noto Sans KR",sans-serif;
    letter-spacing:-.04em;
    white-space:nowrap;
  }
  .pcx-header-actions>.pcx-mobile-notification.has-unread .pcx-mobile-action-label{color:#d9bd82}
  .pcx-header-actions>.pcx-mobile-action .pc-notification-badge,
  .pcx-header-actions>.pcx-mobile-action>b{
    right:-4px!important;
    top:-4px!important;
    z-index:2;
  }
  .pcx-header-actions>.pcx-mobile-cart .pcx-mobile-action-label{font-size:6.5px}
}

@media(max-width:420px){
  .pcx-header-actions{gap:3px}
  .pcx-header-actions>.pcx-mobile-action{width:44px;height:48px;border-radius:13px}
  .pcx-header-actions>.pcx-mobile-coupon>span{display:block!important}
  .pcx-header-actions>.pcx-mobile-coupon strong{font-size:7.5px!important}
}

@media(max-width:360px){
  .pcx-brand span{display:none}
  .pcx-brand img{width:34px;height:34px}
  .pcx-header-inner{grid-template-columns:auto 1fr;gap:0 6px}
  .pcx-header-actions{justify-self:end}
}