/* AniTala RC38 — mobile market-card hierarchy + hardened hamburger/mobile navigation. */
.storefront-v14 .sf-mobile-menu-toggle{
  appearance:none!important;-webkit-appearance:none!important;overflow:hidden!important;
  color:#fff4d6!important;background:rgba(15,14,12,.76)!important;
  border:1px solid rgba(232,202,119,.24)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 8px 22px rgba(0,0,0,.18)!important;
}
.storefront-v14 .sf-mobile-menu-toggle>span{
  display:block!important;width:20px!important;height:2px!important;min-height:2px!important;
  flex:0 0 2px!important;border:0!important;border-radius:99px!important;
  background:#fff4d6!important;opacity:1!important;visibility:visible!important;
  box-shadow:none!important;transform-origin:center!important;
}
.storefront-v14 .sf-mobile-menu-panel svg,
.storefront-v14 .sf-mobile-nav svg,
.storefront-v14 .sf-mobile-icon-link svg{
  inline-size:20px!important;block-size:20px!important;max-inline-size:20px!important;max-block-size:20px!important;
  min-inline-size:0!important;min-block-size:0!important;flex:none!important;
}
.storefront-v14 .sf-mobile-menu-links a svg{inline-size:21px!important;block-size:21px!important;max-inline-size:21px!important;max-block-size:21px!important}

/* Keep all ribbon cards directional and information-led. Older mobile styles centered every field. */
@media (max-width:1320px){
  .storefront-v14 .sf-price-ribbon-item{
    display:grid!important;direction:rtl!important;align-items:center!important;justify-items:stretch!important;
    text-align:start!important;min-width:0!important;overflow:hidden!important;
  }
  .storefront-v14 .sf-price-ribbon-icon{justify-self:center!important;align-self:center!important;margin:0!important}
  .storefront-v14 .sf-price-ribbon-copy{
    display:grid!important;align-content:center!important;justify-items:start!important;min-width:0!important;
    max-width:100%!important;text-align:start!important;margin:0!important;
  }
  .storefront-v14 .sf-price-ribbon-copy b,
  .storefront-v14 .sf-price-ribbon-copy small{
    display:block!important;width:100%!important;max-width:100%!important;text-align:start!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;margin:0!important;
  }
  .storefront-v14 .sf-price-ribbon-item>strong{
    display:block!important;min-width:0!important;max-width:100%!important;margin:0!important;
    text-align:end!important;justify-self:stretch!important;align-self:center!important;
    direction:ltr!important;unicode-bidi:plaintext!important;font-variant-numeric:tabular-nums!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
}

/* Compact laptops/tablets: icon | identity | value in one clean row. */
@media (min-width:761px) and (max-width:1320px){
  .storefront-v14 .sf-price-ribbon-page{
    grid-template-rows:repeat(var(--ribbon-rows,2),56px)!important;gap:6px!important;
  }
  .storefront-v14 .sf-price-ribbon-item{
    grid-template-columns:30px minmax(0,1fr) minmax(72px,auto)!important;
    grid-template-rows:1fr!important;grid-template-areas:"icon copy price"!important;
    height:56px!important;min-height:56px!important;padding:7px 9px!important;column-gap:7px!important;row-gap:0!important;
    border-radius:13px!important;
  }
  .storefront-v14 .sf-price-ribbon-icon{grid-area:icon!important;width:28px!important;height:28px!important;border-radius:9px!important}
  .storefront-v14 .sf-price-ribbon-icon svg{width:15px!important;height:15px!important}
  .storefront-v14 .sf-price-ribbon-copy{grid-area:copy!important}
  .storefront-v14 .sf-price-ribbon-copy b{font-size:9.5px!important;line-height:1.3!important}
  .storefront-v14 .sf-price-ribbon-copy small{display:block!important;font-size:7.5px!important;line-height:1.25!important;color:#a99f90!important;margin-top:1px!important}
  .storefront-v14 .sf-price-ribbon-item>strong{grid-area:price!important;font-size:10.5px!important;line-height:1.2!important;color:#f1d383!important}
}

/* Phones: two-line information block; never center title/value. */
@media (max-width:760px){
  .storefront-v14 .sf-price-ribbon{
    padding-inline:8px!important;padding-bottom:9px!important;
  }
  .storefront-v14 .sf-price-ribbon-head{
    display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;
    min-height:30px!important;margin-bottom:5px!important;padding-inline:2px!important;
  }
  .storefront-v14 .sf-price-ribbon-head>div{display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important}
  .storefront-v14 .sf-price-ribbon-head span{font-size:10px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .storefront-v14 .sf-price-ribbon-head a{flex:none!important;height:26px!important;max-width:42vw!important;font-size:9px!important;white-space:nowrap!important}
  .storefront-v14 .sf-price-ribbon-page{
    grid-template-rows:repeat(var(--ribbon-rows,2),58px)!important;gap:5px!important;
  }
  .storefront-v14 .sf-price-ribbon-item{
    grid-template-columns:28px minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    grid-template-areas:"icon copy" "icon price"!important;
    height:58px!important;min-height:58px!important;padding:6px 7px!important;column-gap:7px!important;row-gap:1px!important;
    border-radius:12px!important;background:linear-gradient(180deg,rgba(18,16,12,.82),rgba(14,13,11,.72))!important;
  }
  .storefront-v14 .sf-price-ribbon-item.is-emphasized{
    background:linear-gradient(145deg,rgba(71,55,24,.88),rgba(18,16,12,.78))!important;
  }
  .storefront-v14 .sf-price-ribbon-icon{
    grid-area:icon!important;width:27px!important;height:27px!important;border-radius:9px!important;
  }
  .storefront-v14 .sf-price-ribbon-icon svg{width:14px!important;height:14px!important}
  .storefront-v14 .sf-price-ribbon-copy{grid-area:copy!important;align-self:end!important}
  .storefront-v14 .sf-price-ribbon-copy b{
    font-size:9.25px!important;line-height:1.25!important;font-weight:850!important;
    -webkit-line-clamp:unset!important;-webkit-box-orient:unset!important;
  }
  .storefront-v14 .sf-price-ribbon-copy small{
    display:block!important;font-size:7.25px!important;line-height:1.2!important;color:#a99f90!important;margin-top:1px!important;
  }
  .storefront-v14 .sf-price-ribbon-item>strong{
    grid-area:price!important;align-self:start!important;text-align:start!important;justify-self:stretch!important;
    font-size:10px!important;line-height:1.25!important;font-weight:900!important;color:#f0cf76!important;
  }
  .storefront-v14 .sf-price-ribbon-controls{margin-top:6px!important;min-height:24px!important}
}

/* Slightly wider phones can carry four cards per row without sacrificing hierarchy. */
@media (min-width:561px) and (max-width:760px){
  .storefront-v14 .sf-price-ribbon-item{padding-inline:8px!important}
  .storefront-v14 .sf-price-ribbon-copy b{font-size:9.5px!important}
  .storefront-v14 .sf-price-ribbon-item>strong{font-size:10.25px!important}
}

/* Very narrow devices: preserve two columns but trim only secondary unit text if it cannot fit. */
@media (max-width:390px){
  .storefront-v14 .sf-price-ribbon-page{grid-template-rows:repeat(var(--ribbon-rows,2),56px)!important}
  .storefront-v14 .sf-price-ribbon-item{height:56px!important;min-height:56px!important;grid-template-columns:25px minmax(0,1fr)!important;padding:5px 6px!important;column-gap:5px!important}
  .storefront-v14 .sf-price-ribbon-icon{width:24px!important;height:24px!important}
  .storefront-v14 .sf-price-ribbon-copy b{font-size:8.75px!important}
  .storefront-v14 .sf-price-ribbon-copy small{font-size:6.75px!important}
  .storefront-v14 .sf-price-ribbon-item>strong{font-size:9.25px!important}
}