@charset "utf-8";
/* =================================================================
   RESET & BASE  ? minimal, modern reset (header untouched)           
   =================================================================*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,
pre,a,abbr,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,
strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,
form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,
canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,
output,ruby,section,summary,time,mark,audio,video{
  margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;
}
/* HTML5 display?role reset */
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,
section{display:block}
ul,ol{list-style:none}
img{display:block;max-width:100%;height:auto;border:0}
a{color:inherit;text-decoration:none;transition:opacity .2s ease}
a:hover{opacity:.7}
html{scroll-behavior:smooth;-webkit-text-size-adjust:none;background:#fff}
body{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;line-height:1.5;color:#212121}

/* =================================================================
   UTILITY CLASSES                                                   
   =================================================================*/
.u-cf::before,.u-cf::after{content:"";display:table}.u-cf::after{clear:both}
.u-wrap{display:inline-flex;align-items:center;justify-content:center}
.btn{display:inline-block;padding:.5rem 1rem;font-size:.875rem;font-weight:700;border-radius:4px;background:#fc5889;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.15);text-shadow:0 -1px #e71257}
.btn:hover{opacity:.85}

/* =================================================================
   THEME VARIABLES & GRADIENT HELPERS                                
   =================================================================*/
:root{
  --pink-l:#ffd8e7;
  --pink-m:#ffb3d3;
  --pink-h:#ff868d;
  --pink-d:#ffab9e;
  --gray-l:#f4f4f4;
  --gray:#ccc;
  --gray-d:#999;
  --dark:#212121;
}

/* =================================================================
   NAV BAR & FOOTER (header styles kept as?is in original CSS)        
   =================================================================*/
.nav_bar{background:linear-gradient(to bottom,var(--pink-l),var(--pink-m));text-align:center;box-shadow:0 2px 1px #ddd;padding:7px 0}.nav_bar .btn{font-size:.75rem;padding:4px 8px}
footer.sttl_s{border-top:3px solid #fb487d;border-bottom:none;background:linear-gradient(to bottom,var(--pink-l) 0,var(--pink-m) 100%)}
footer .nav_bar{background:linear-gradient(to bottom,var(--pink-l),var(--pink-m));padding:8px 0}
.foot_wrap{padding:20px 10px;background:#868;height:auto;color:#fff;text-align:center;box-shadow:inset 0 3px 4px #666}

/* =================================================================
   PRODUCT LIST / CARD GRID                                          
   =================================================================*/
.product_section{display:flex;flex-direction:column}
.product_section li{display:flex;gap:10px;align-items:flex-start;padding:10px;border-bottom:1px solid var(--gray)}
.product_pict{flex:0 0 110px}
.product_summary{flex:1 1 auto;font-size:.875rem;line-height:1.4}
.product_name{font-weight:700;margin-bottom:4px}
.product_price{font-weight:700;color:#de0000;margin-top:4px}
.product_price_regular{font-size:.875rem;text-decoration:line-through;color:#de0000}
.product_price_soldout{background:#de0000;color:#fff;font-size:.75rem;padding:2px 4px;border-radius:4px;width:max-content}

/* =================================================================

/* =================================================================
   DRAWER MENU                                                       
   =================================================================*/
.drawer{position:fixed;top:0;left:-280px;width:280px;height:100%;overflow-y:auto;background:#fff;color:var(--dark);transition:left .3s}
.drawer.open{left:0}
.drawer__item{border-bottom:1px solid var(--gray-l)}
.drawer__item__name{display:flex;align-items:center;gap:10px;padding:20px;color:var(--dark)}

/* -----------------------------------------------------------------
   MEDIA QUERIES                                                     
   ----------------------------------------------------------------*/
@media(min-width:768px){
  .product_section{flex-direction:row;flex-wrap:wrap}
  .product_section li{flex:0 0 48%;max-width:48%}
  .product_pict{flex:0 0 140px}
}

/* =================================================================
   MISC: POPUP, TALK BUBBLES, ETC. (kept minimal)                    
   =================================================================*/
.bg_onetime_popup{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;visibility:hidden;opacity:0;transition:.5s;background:rgba(0,0,0,.5)}
.bg_onetime_popup.js_active{visibility:visible;opacity:1}
.onetime_popup{position:relative}

/* Chat bubbles ( .talk-left / .talk-right ) simplified */
.talk-left,.talk-right{position:relative;border:2px solid var(--dark);border-radius:10px;padding:3%;background:#fff;width:70%;margin:10px 0;font-size:.875rem}
.talk-left{margin-left:auto}

/* highlight */
.highlight_yellow{background:linear-gradient(transparent 60%,#ffff66 60%)}