/* SSOL V23.1 — Home / Product / Dock unification
   CSS-only. Keeps PHP, DB, API, Coupang data and affiliate URLs unchanged. */

:root{
  --v231-pink:#ff3855;
  --v231-soft:#fff1f4;
  --v231-ink:#171a24;
  --v231-muted:#7d8593;
  --v231-line:#edf0f4;
}

/* HOME FRAME */
.ssol17-home{
  padding-left:4px!important;
  padding-right:4px!important;
  padding-bottom:118px!important;
}
.ssol17-top{margin-bottom:10px!important;padding-top:5px!important;padding-bottom:10px!important}
.ssol17-brand>span{font-size:31px!important;letter-spacing:-3px!important}
.ssol17-brand i b,.ssol17-brand i small{font-size:10px!important}
.ssol17-top>div a{width:40px!important;height:40px!important}
.ssol17-search{
  min-height:48px!important;height:48px!important;padding:0 17px!important;
  display:flex!important;align-items:center!important;border-radius:16px!important;
  background:#f5f6f8!important;color:#8d95a2!important;font-size:13px!important;
}

/* Hero: compact enough that shopping content appears sooner */
.ssol17-hero{
  min-height:184px!important;margin-top:10px!important;padding:22px 20px!important;
  border-radius:24px!important;
  background:linear-gradient(130deg,#fff0f3 0%,#ffd4dc 63%,#ffb8c7 100%)!important;
  box-shadow:0 14px 34px rgba(255,56,85,.08)!important;
}
.ssol17-hero em{font-size:10px!important}
.ssol17-hero h1{margin:9px 0!important;font-size:28px!important;line-height:1.08!important}
.ssol17-hero p{max-width:235px;margin:0 0 12px!important;font-size:12px!important;line-height:1.5!important}
.ssol17-hero>div>a{margin-top:3px!important;padding:10px 14px!important;font-size:11px!important}
.ssol17-hero aside>span{font-size:54px!important}
.ssol17-hero aside>b{padding:7px 8px!important;font-size:9px!important}

/* Quick menu */
.ssol17-quick{margin-top:11px!important;gap:7px!important}
.ssol17-quick a{
  min-height:70px!important;padding:10px 3px 8px!important;border-radius:16px!important;
  background:#f8f7fb!important;
}
.ssol17-quick i{font-size:22px!important}
.ssol17-quick b{margin-top:5px!important;font-size:10px!important}

/* Partner malls: compact horizontal rail */
.ssol17-malls{margin-top:11px!important;gap:8px!important}
.ssol17-malls>a{
  flex:0 0 92px!important;min-height:84px!important;padding:9px 6px!important;
  border-radius:16px!important;background:#fff!important;
}
.ssol17-malls span{height:34px!important}
.ssol17-malls img{max-width:67px!important;max-height:30px!important}
.ssol17-malls b{font-size:10px!important}
.ssol17-malls small{font-size:9px!important}

/* Promotional cards are supporting content, not dominant */
.ssol17-promos{margin-top:12px!important;gap:8px!important}
.ssol17-promos>a{min-height:82px!important;padding:15px!important;border-radius:18px!important}
.ssol17-promos b{font-size:14px!important}
.ssol17-promos small{margin-top:5px!important;font-size:10px!important}

/* Shopping section */
.ssol17-deals{margin-top:20px!important}
.ssol17-categories{margin-top:30px!important}
.ssol17-title{margin-bottom:13px!important;align-items:center!important}
.ssol17-title em{font-size:9px!important}
.ssol17-title h2{font-size:21px!important;letter-spacing:-.7px!important}
.ssol17-title p{margin-top:4px!important;font-size:11px!important;line-height:1.45!important}
.ssol17-title>a{font-size:11px!important}

/* PRODUCT CARDS — explicit reset prevents the old giant badge/image collision */
.ssol17-product-grid{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:15px 11px!important;
}
.ssol17-product-grid>a{
  display:flex!important;flex-direction:column!important;min-width:0!important;
  padding:0 0 13px!important;overflow:hidden!important;
  border:1px solid var(--v231-line)!important;border-radius:20px!important;
  background:#fff!important;box-shadow:0 7px 22px rgba(25,32,50,.05)!important;
}
.ssol17-product-grid .pic{
  position:relative!important;width:100%!important;height:auto!important;aspect-ratio:1/1!important;
  margin:0!important;padding:0!important;overflow:hidden!important;border:0!important;
  border-radius:0!important;background:#fff!important;
}
.ssol17-product-grid .pic img{
  display:block!important;width:100%!important;height:100%!important;max-width:none!important;
  margin:0!important;padding:7px!important;object-fit:contain!important;background:#fff!important;
  transform:none!important;
}
.ssol17-product-grid .pic strong,
.ssol17-product-grid .pic i{
  position:absolute!important;z-index:3!important;width:auto!important;height:auto!important;
  min-width:0!important;min-height:0!important;max-width:calc(100% - 18px)!important;
  margin:0!important;padding:5px 7px!important;aspect-ratio:auto!important;
  border-radius:999px!important;line-height:1.1!important;transform:none!important;
  box-shadow:none!important;white-space:nowrap!important;
}
.ssol17-product-grid .pic strong{
  left:8px!important;right:auto!important;top:8px!important;bottom:auto!important;
  background:rgba(24,27,36,.84)!important;color:#fff!important;font-size:9px!important;
}
.ssol17-product-grid .pic i{
  right:8px!important;left:auto!important;top:8px!important;bottom:auto!important;
  background:var(--v231-pink)!important;color:#fff!important;font-size:9px!important;
}
.ssol17-product-grid .pic strong:before,.ssol17-product-grid .pic strong:after,
.ssol17-product-grid .pic i:before,.ssol17-product-grid .pic i:after{display:none!important;content:none!important}
.ssol17-product-grid .pic strong:empty,.ssol17-product-grid .pic i:empty{display:none!important}

.ssol17-product-grid>a>small{
  order:2!important;margin:10px 11px 0!important;color:#8b93a1!important;
  font-size:10px!important;font-weight:800!important;
}
.ssol17-product-grid>a>b{
  order:3!important;min-height:42px!important;margin:5px 11px 0!important;
  color:var(--v231-ink)!important;font-size:13px!important;line-height:1.45!important;font-weight:800!important;
}
.ssol17-product-grid>a>del{
  order:4!important;margin:7px 11px 0!important;color:#a6adb8!important;font-size:10px!important;
}
.ssol17-product-grid>a>em{
  order:5!important;margin:3px 11px 0!important;color:var(--v231-ink)!important;
  font-size:18px!important;line-height:1.2!important;font-weight:1000!important;
}
.ssol17-product-grid>a>em:before{display:none!important;content:none!important}
.s22-buy{
  order:6!important;display:flex!important;align-items:center!important;justify-content:center!important;
  min-height:38px!important;margin:11px 10px 0!important;padding:9px 7px!important;
  border-radius:12px!important;background:var(--v231-pink)!important;color:#fff!important;
  font-size:11px!important;font-weight:1000!important;
}
.s22-benefit{font-size:10px!important}
.s22-product-note,.ssol17-disclosure{font-size:10px!important;line-height:1.55!important}

/* Categories */
.ssol17-cat-grid{gap:16px 8px!important}
.ssol17-cat-grid img{width:58px!important;height:58px!important;border-radius:17px!important}
.ssol17-cat-grid b{font-size:10px!important}

/* FINAL DOCK */
.s22-tabbar{
  width:min(calc(100% - 20px),410px)!important;height:66px!important;
  bottom:max(10px,env(safe-area-inset-bottom))!important;
  padding:5px 7px!important;border:1px solid rgba(229,232,238,.9)!important;
  border-radius:24px!important;background:rgba(255,255,255,.96)!important;
  box-shadow:0 12px 36px rgba(23,28,42,.14)!important;backdrop-filter:blur(18px)!important;
}
.s22-tabbar a{height:54px!important;gap:3px!important;border-radius:17px!important}
.s22-tabbar a b{font-size:10px!important;font-weight:900!important}
.s22-navicon{width:29px!important;height:29px!important}
.s22-navicon svg{width:20px!important;height:20px!important}
.s22-tabbar a.active .s22-navicon{
  width:31px!important;height:31px!important;border-radius:11px!important;
  background:var(--v231-pink)!important;color:#fff!important;
  box-shadow:0 7px 15px rgba(255,56,85,.2)!important;
}
.s22-tabbar a.active{color:var(--v231-pink)!important}

/* Native safe area */
html.ssol-native-app .ssol17-home{padding-bottom:calc(118px + var(--ssol-native-safe-bottom,0px))!important}
html.ssol-native-app.ssol-keyboard-open .s22-tabbar{display:none!important}

@media(max-width:390px){
  .ssol17-home{padding-left:2px!important;padding-right:2px!important}
  .ssol17-hero{min-height:176px!important;padding:19px 17px!important}
  .ssol17-hero h1{font-size:25px!important}
  .ssol17-hero p{max-width:210px;font-size:11px!important}
  .ssol17-hero aside{margin-right:-8px!important}
  .ssol17-hero aside>span{font-size:47px!important}
  .ssol17-product-grid{gap:13px 9px!important}
  .ssol17-product-grid>a>b{font-size:12px!important;margin-left:10px!important;margin-right:10px!important}
  .ssol17-product-grid>a>em{font-size:17px!important;margin-left:10px!important}
  .s22-buy{margin-left:9px!important;margin-right:9px!important;font-size:10.5px!important}
}
@media(max-width:350px){
  .ssol17-hero aside{opacity:.75}
  .ssol17-product-grid{gap:11px 7px!important}
  .s22-tabbar{width:calc(100% - 12px)!important}
}
@media(min-width:601px){
  .ssol17-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}