/* ===== G.SHINE MOBILE REDESIGN ===== */

@media (max-width: 820px) {

  /* ---------- HEADER ---------- */
  .ann{
    display:none;
  }

  header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(247,244,237,.96);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--hair);
  }

  .nav{
    min-height:64px;
    padding:0 16px;
    grid-template-columns:44px 1fr auto;
    gap:8px;
  }

  .burger{
    width:44px;
    height:44px;
    min-height:44px;
    overflow:hidden;
    color:transparent;
    font-size:0;
    padding:0;
    position:relative;
  }

  .burger::before{
    content:"";
    width:20px;
    height:14px;
    display:block;
    margin:auto;
    background:
      linear-gradient(var(--ink),var(--ink)) 0 0/20px 1px no-repeat,
      linear-gradient(var(--ink),var(--ink)) 0 6px/20px 1px no-repeat,
      linear-gradient(var(--ink),var(--ink)) 0 12px/20px 1px no-repeat;
  }

  .brandmark{
    font-size:22px;
    letter-spacing:.14em;
    white-space:nowrap;
  }

  .acts{
    gap:0;
  }

  .acts a[href*="?s="]{
    display:none;
  }

  #cartBtn{
    font-size:0;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    position:relative;
  }

  #cartBtn::before{
    content:"Bag";
    font-family:'Hanken Grotesk',sans-serif;
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  #cartCount{
    position:absolute;
    top:7px;
    right:-4px;
    min-width:17px;
    height:17px;
    padding:0 4px;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:var(--wine);
    color:#fff;
    font-size:9px;
    line-height:1;
  }

  /* ---------- HERO ---------- */
  .hero{
    min-height:calc(100svh - 64px);
    background-position:56% center;
    align-items:flex-end;
  }

  .hero::after{
    background:
      linear-gradient(
        0deg,
        rgba(14,13,10,.96) 0%,
        rgba(14,13,10,.78) 23%,
        rgba(14,13,10,.42) 48%,
        rgba(14,13,10,.10) 78%,
        rgba(14,13,10,.03) 100%
      );
  }

  .hero .wrap{
    width:100%;
    padding:0 20px;
  }

  .hero-copy{
    padding:0 0 38px;
    max-width:100%;
  }

  .hero .pill{
    display:inline-flex;
    font-size:10px;
    letter-spacing:.16em;
    text-transform:uppercase;
    margin-bottom:14px;
    color:#eee8dc;
  }

  .hero h1{
    font-size:clamp(36px,10.5vw,52px);
    line-height:.98;
    letter-spacing:-.025em;
    max-width:340px;
  }

  .hero p{
    margin-top:16px;
    max-width:310px;
    font-size:14px;
    line-height:1.5;
    color:#e5dfd2;
  }

  .hero .cta{
    margin-top:24px;
    min-height:48px;
    padding:0 18px;
    background:#f4f0e7;
    color:#171510;
    border:none;
    font-size:11px;
    letter-spacing:.13em;
  }

  /* ---------- BRANDS ---------- */
  .brands{
    padding:15px 0 14px;
    border-bottom:1px solid var(--hair);
  }

  .brands .wrap{
    padding:0 16px;
  }

  .brands .lbl{
    font-size:9px;
    margin-bottom:8px;
  }

  .marquee .row{
    gap:24px;
  }

  .marquee b{
    font-size:13px;
    font-weight:500;
    white-space:nowrap;
  }

  /* ---------- PRODUCT SECTION ---------- */
  #new,
  #sale{
    padding-left:14px;
    padding-right:14px;
  }

  .sec-head{
    align-items:flex-end;
    margin:30px 0 18px;
    padding:0 2px;
  }

  .sec-head h2{
    font-size:28px;
    line-height:1;
    letter-spacing:-.02em;
  }

  .sec-head .count{
    display:none;
  }

  .sec-head .all{
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  .grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px 10px;
  }

  .card{
    min-width:0;
  }

  .card .plate{
    aspect-ratio:4/5;
    background:#efede7;
  }

  .card .meta{
    padding-top:10px;
  }

  .card .meta .brand{
    font-size:9px;
    letter-spacing:.13em;
    text-transform:uppercase;
    margin-bottom:4px;
  }

  .card .meta .name{
    font-size:13px;
    line-height:1.25;
    min-height:0;
  }

  .card .meta .price{
    margin-top:6px;
    font-size:14px;
    font-weight:500;
  }

  .card .artline{
    display:none;
  }

  .reveal{
    margin-top:8px;
  }

  .sizes{
    gap:5px;
  }

  .sizes span{
    min-width:32px;
    min-height:32px;
    padding:4px 7px;
    font-size:10px;
  }

  .cardacts{
    margin-top:8px;
    gap:6px;
  }

  .addbtn{
    flex:1 1 100%;
    min-height:40px;
    padding:9px 8px;
    font-size:10px;
  }

  .quick{
    display:none !important;
  }

  /* ---------- MOBILE MENU ---------- */
  .mnav{
    width:min(360px,92vw);
  }

  .mnav-head{
    padding:18px 20px;
  }

  .mnav-list>li>a,
  .mnav-list a{
    min-height:52px;
    padding:8px 20px;
    font-size:16px;
  }

  .mnav-list .sub-menu a{
    padding-left:34px;
    font-size:14px;
  }

}

@media (max-width: 560px){

  .hero{
    min-height:calc(100svh - 64px);
  }

  .grid{
    gap:18px 8px;
  }

  .card .meta .name{
    font-size:12.5px;
  }

  .card .meta .price{
    font-size:13.5px;
  }

}