@charset "UTF-8";

/********************************************************
■ 포시즌플라워 공통 상품카드 (fs.item.card.php)
  - 메인 상품 섹션 / 상품 목록 공통
  - 디자인 기준 : 메인 상품카드 (sec-tiles-4item1)
********************************************************/
.fs-card { position:relative; text-align:left; }

/* 이미지 */
.fs-card-thumb { position:relative; }
.fs-card-img { position:relative; display:block; aspect-ratio:1; border-radius:8px; background:#eee; overflow:hidden; }
.fs-card-img img { position:absolute; left:0; top:0; width:100% !important; height:100% !important; object-fit:cover; transition:transform 600ms, opacity 400ms; }
.fs-card-img .img2 { opacity:0; }
.fs-card:hover .fs-card-img img { transform:scale(1.1); }
.fs-card:hover .fs-card-img .img2 { opacity:1; }
/* 상품 목록 썸네일 : 가장자리 투명 여백(600px 중 20px) 가림 */
.fs-card--trim .fs-card-img img { transform:scale(1.075); }
.fs-card--trim:hover .fs-card-img img { transform:scale(1.15); }

/* 라벨 (메인과 동일) */
.fs-card .tab-labels { position:absolute; left:0; top:0; z-index:2; pointer-events:none; }
.fs-card .shop-labels { position:relative; display:flex; }
.fs-card .shop-labels .shop-label { position:relative; display:flex; border-radius:8px 0 8px 0; padding:5px 15px; color:#fff; font-size:1rem; }
.fs-card .shop-labels .shop-label:nth-of-type(1) { z-index:5; }
.fs-card .shop-labels .shop-label:nth-of-type(2) { z-index:4; margin-left:-5px; }
.fs-card .shop-labels .shop-label:nth-of-type(3) { z-index:3; margin-left:-5px; }
.fs-card .shop-labels .shop-label:nth-of-type(4) { z-index:2; margin-left:-5px; }
.fs-card .shop-labels .shop-label:nth-of-type(5) { z-index:1; margin-left:-5px; }
.fs-card .shop-label-type1 { background:linear-gradient(90deg, #6603B2 0%, #9936E5 100%); }
.fs-card .shop-label-type2 { background:linear-gradient(90deg, #00B39E 0%, #2BDFCA 100%); }
.fs-card .shop-label-type3 { background:linear-gradient(90deg, #0354B2 0%, #227CE3 100%); }
.fs-card .shop-label-type4 { background:linear-gradient(90deg, #EA7600 0%, #FF9932 100%); }
.fs-card .shop-label-type5 { background:linear-gradient(90deg, #FD16CB 0%, #F551D2 100%); }

/* 품절 */
.fs-card-soldout { position:absolute; left:0; top:0; right:0; bottom:0; z-index:2; display:flex; align-items:center; justify-content:center; border-radius:8px; background:rgba(0,0,0,.45); color:#fff; font-size:1.125rem; font-weight:700; letter-spacing:1px; pointer-events:none; }

/* 장바구니·위시리스트 버튼 : 이미지 하단 가운데, 마우스를 올리면 나타남 */
.fs-card-btns { position:absolute; left:50%; bottom:14px; z-index:3; display:flex; gap:8px; opacity:0; visibility:hidden; transform:translate(-50%, 10px); transition:opacity 300ms, visibility 300ms, transform 300ms; }
.fs-card:hover .fs-card-btns,
.fs-card:focus-within .fs-card-btns { opacity:1; visibility:visible; transform:translate(-50%, 0); }
.fs-card-btns > div { display:flex; }
.fs-card-btns button { display:flex; align-items:center; justify-content:center; width:42px; height:42px; padding:0; border-radius:50%; background:rgba(255,255,255,.95); box-shadow:0 4px 14px rgba(0,0,0,.12); color:var(--main-color1, #5B412D); transition:background-color 200ms, color 200ms, transform 200ms; }
.fs-card-btns button:hover { background:var(--main-color1, #5B412D); color:#fff; transform:translateY(-2px); }

/* 아이콘 (탑메뉴 장바구니 아이콘과 같은 모양) */
.fs-card .fs-ico { display:block; width:20px; height:20px; }
.fs-card .fs-ico-cart { background:currentColor; -webkit-mask:url('../img/top-icon-cart.png') no-repeat center/contain; mask:url('../img/top-icon-cart.png') no-repeat center/contain; }

/* 옵션 선택 레이어 (옵션 있는 상품의 장바구니) : 이미지 위에 표시 */
.fs-card .cart-layer.sct_cartop { position:absolute; left:10px; right:10px; bottom:10px; z-index:6; }
.fs-card .sct_cartop_wr { position:relative; top:auto; left:auto; width:100%; padding:14px; border:none !important; border-radius:10px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.15); opacity:1; color:#111; text-align:left; }
.fs-card .sct_cartop_wr .it_option { width:100%; height:38px; margin:0 0 8px; padding:0 10px; border:1px solid #ddd; border-radius:8px; }
.fs-card .sct_cartop_wr button { width:100%; height:40px; padding:0 !important; border-radius:8px; font-size:.875rem; font-weight:600; }
.fs-card .sct_cartop_wr .cartopt_cart_btn { margin-bottom:6px; background:var(--main-color1, #5B412D); color:#fff; }
.fs-card .sct_cartop_wr .cartopt_close_btn { border:1px solid #ddd; background:#fff; color:#555; }

/* 내용 */
.fs-card-body { display:flex; flex-direction:column; gap:10px; margin-top:12px; line-height:1.4; }
.fs-card-body .labels { display:flex; flex-wrap:wrap; gap:4px; }
.fs-card-body .labels span { display:inline-flex; padding:2px 8px; border-radius:4px; font-size:.75rem; }
.fs-card .fs-card-body .head { display:-webkit-box; height:auto; max-height:none; font-size:1.25rem; font-weight:700; color:#111; }
.fs-card-body .head:hover { color:var(--main-color1, #5B412D); }
.fs-card-body .desc { height:auto; max-height:none; font-size:1rem; color:#333; }
.fs-card-body .price { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; }
.fs-card-body .price .percent { font-size:1.375rem; font-weight:900; color:#00c0aa; }
.fs-card-body .price .true-price { font-size:1.375rem; font-weight:900; color:#111; }
.fs-card-body .price .true-price b { font-weight:700; font-size:.875em; }
.fs-card-body .price .cust-price { font-size:1rem; font-weight:700; color:#999; text-decoration:line-through; }
.fs-card-body .price .stop { font-size:.875rem; color:#d00; }

/* 하단 : 별점 + 공유 (메인 카드와 동일 배치) */
.fs-card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:2px; padding-top:10px; border-top:1px solid #dedede; }
.fs-card-star { display:flex; align-items:center; gap:2px; font-size:.9375rem; font-weight:600; color:#333; }
.fs-card-star .material-symbols-outlined { color:rgba(0,0,0,.1); font-variation-settings:'FILL' 1; }
.fs-card-star.is-on .material-symbols-outlined { color:#F3CE00; }
.fs-card-foot .btn_share { display:flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; border:1px solid #d3d3d3; border-radius:50%; background:#fff; color:#333; transition:background-color 200ms, color 200ms, border-color 200ms; }
.fs-card-foot .btn_share:hover { border-color:var(--main-color1, #5B412D); background:var(--main-color1, #5B412D); color:#fff; }
.fs-card-foot .btn_share .fs-ico { width:18px; height:18px; }

/* 공유 팝업 (상품 목록 기능) */
.fs-card .sct_sns_wrap { display:none; position:fixed; left:0; top:0; width:100%; height:100%; z-index:999; }
.fs-card .sct_sns_bg { width:100%; height:100%; background:rgba(0,0,0,.15); }
.fs-card .sct_sns { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); display:flex; justify-content:center; align-items:center; gap:10px; padding:30px 50px; border-radius:16px; background:#fff; box-shadow:0 20px 50px rgba(0,0,0,.2); }
.fs-card .sct_sns a { display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:50%; }
.fs-card .sct_sns .share-facebook { background:var(--facebook-color, #415b92); }
.fs-card .sct_sns .share-twitter { background:var(--twiter-color, #35b3dc); }
.fs-card .sct_sns img { width:24px; }
.fs-card .sct_sns .sct_sns_cls { position:absolute; right:6px; top:6px; width:32px; height:32px; color:#999; font-size:16px; }


/* 상품 목록 [더보기] 버튼 (list.10.skin.php) */
.fs-more-wrap { display:flex; justify-content:center; margin:20px 0 60px; }
.fs-more-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:240px; height:52px; padding:0 30px; border:1px solid var(--main-color1, #5B412D); border-radius:99px; background:#fff; color:var(--main-color1, #5B412D); font-size:1rem; font-weight:600; transition:background-color 200ms, color 200ms; }
.fs-more-btn:hover { background:var(--main-color1, #5B412D); color:#fff; }
.fs-more-btn .cnt { font-size:.875rem; font-weight:400; opacity:.7; }
.fs-more-btn.is-loading { pointer-events:none; opacity:.6; }
.fs-more-btn.is-loading:after { content:""; width:14px; height:14px; margin-left:4px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:fs-more-spin .7s linear infinite; }
@keyframes fs-more-spin { to { transform:rotate(360deg); } }

@media (max-width: 1200px) {
    .fs-card .shop-labels .shop-label { font-size:.85rem; }
}

@media (max-width: 1024px) {
    .fs-card-body .head { font-size:1.125rem; }
    .fs-card-body .price .true-price,
    .fs-card-body .price .percent { font-size:1.25rem; }
}

@media (max-width: 767px) {
    .fs-card .shop-labels .shop-label { padding:4px 10px; font-size:.75rem; }
    .fs-card-btns { bottom:8px; gap:6px; }
    .fs-card-btns button { width:34px; height:34px; }
    .fs-card .fs-ico { width:16px; height:16px; }
    .fs-card-body { gap:6px; margin-top:8px; }
    .fs-card-body .head { font-size:1rem; }
    .fs-card-body .desc { font-size:.875rem; }
    .fs-card-body .price .true-price,
    .fs-card-body .price .percent { font-size:1.125rem; }
    .fs-card-body .price .cust-price { font-size:.875rem; }
    .fs-card-foot { padding-top:8px; }
    .fs-card-foot .btn_share { width:32px; height:32px; }
    .fs-card .sct_sns { padding:24px 36px; }
    .fs-more-wrap { margin:10px 0 40px; }
    .fs-more-btn { width:100%; height:48px; }
}

/* 터치 기기 : 마우스 오버가 없으므로 버튼 항상 표시 */
@media (hover: none) {
    .fs-card-btns { opacity:1; visibility:visible; transform:translate(-50%, 0); }
    .fs-card:hover .fs-card-img img { transform:none; }
    .fs-card--trim:hover .fs-card-img img { transform:scale(1.075); }
}