/* 나머지 화면 — 후기 · 문의 · 마이페이지 · 주문완료 · 주문서 · 장바구니

   shop.css 가 800줄을 넘겨 갈라 놓은 것이다. 규칙을 옮기지 않고 자르기만
   했으므로, head.sub.php 가 원래 순서대로 이어서 실으면 어느 선언이
   이기는지가 달라지지 않는다. */

/* --- 나머지 쇼핑몰 화면 ---------------------------------------------------
   검색 결과 · 위시리스트 · 쿠폰존 · 개인결제. 영카트 기본 색(자홍 강조어,
   남색 버튼, 파란 체크)이 그대로 남아 있던 자리를 쇼핑몰 팔레트로 돌린다. */
.clarity-shop-page #ssch h2, .clarity-shop-page #ssch h3 { margin-bottom: 1rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.clarity-shop-page #ssch h2 strong, .clarity-shop-page #ssch h3 strong { color: var(--clarity-primary); }
.clarity-shop-page #ssch input[type=checkbox], .clarity-shop-page #ssch input[type=radio] { accent-color: var(--clarity-primary); }
.clarity-shop-page #ssch :is(input[type=text], input[type=number], select) { min-height: 2.75rem; border: 1px solid var(--clarity-border-strong); border-radius: 0; background: var(--clarity-surface); color: var(--clarity-text); padding-inline: .75rem; font-size: .8125rem; }
.clarity-shop-page #ssch .btn_submit { min-height: 2.75rem; border: 1px solid var(--clarity-primary); border-radius: 0; background: var(--clarity-primary); color: var(--color-primary-content, #fff); cursor: pointer; padding-inline: 1.25rem; font-size: .8125rem; font-weight: 700; }
.clarity-shop-page #ssch .btn_submit:hover { background: var(--clarity-primary-hover); border-color: var(--clarity-primary-hover); }
.clarity-shop-page #ssch a { color: var(--clarity-text-soft); }
.clarity-shop-page #ssch a:hover { color: var(--clarity-primary); }

.clarity-shop-page :is(#sod_ws, #sct, .couponzone_list) .empty_list,
.clarity-shop-page :is(#sod_ws, #sct, .couponzone_list) .empty_table,
.clarity-shop-page .couponzone_list .empty_coupon { border: 1px dashed var(--clarity-border); padding: 3.5rem 0; color: var(--clarity-muted); text-align: center; font-size: .8125rem; }
.clarity-shop-page :is(#sod_ws_act, #sod_ws .btn_confirm) { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.clarity-shop-page :is(#sod_ws_act, #sod_ws .btn_confirm) :is(a, button, input[type=submit]) { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; border: 1px solid var(--clarity-border-strong); border-radius: 0; background: var(--clarity-surface); color: var(--clarity-text-soft); cursor: pointer; padding-inline: 1.25rem; font-size: .8125rem; font-weight: 700; }
.clarity-shop-page :is(#sod_ws_act, #sod_ws .btn_confirm) .btn_submit { border-color: var(--clarity-primary); background: var(--clarity-primary); color: var(--color-primary-content, #fff); }

.clarity-shop-page .clarity-wishlist-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.clarity-shop-page .clarity-wishlist-kicker {
    margin: 0;
    color: var(--clarity-primary);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.clarity-shop-page .clarity-wishlist-count {
    margin: 0;
    color: var(--clarity-muted);
    font-size: .78rem;
}
.clarity-shop-page .clarity-wishlist-count strong { color: var(--clarity-text); }
.clarity-shop-page #sod_ws .list_02 > ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.clarity-shop-page #sod_ws .list_02 > ul > li:not(.empty_table) {
    display: grid;
    min-width: 0;
    grid-template-columns: 80px minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    min-height: 112px;
    border: 1px solid var(--clarity-border);
    background: var(--clarity-surface);
    padding: .9rem;
}
.clarity-shop-page #sod_ws .sod_ws_img,
.clarity-shop-page #sod_ws .sod_ws_img a,
.clarity-shop-page #sod_ws .sod_ws_img img {
    display: block;
    width: 80px;
    height: 80px;
}
.clarity-shop-page #sod_ws .sod_ws_img img { object-fit: cover; }
.clarity-shop-page #sod_ws .wish_info {
    position: relative;
    min-width: 0;
    padding: 0 1.75rem;
}
.clarity-shop-page #sod_ws .wish_chk { position: absolute; top: .05rem; left: 0; }
.clarity-shop-page #sod_ws .info_link {
    display: block;
    overflow: hidden;
    color: var(--clarity-text);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.clarity-shop-page #sod_ws .info_link:hover { color: var(--clarity-primary); }
.clarity-shop-page #sod_ws .info_date { margin-top: .35rem; color: var(--clarity-muted); font-size: .72rem; }
.clarity-shop-page #sod_ws .wish_del {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    color: var(--clarity-muted);
    font-size: .8rem;
}
.clarity-shop-page #sod_ws .wish_del:hover { color: var(--clarity-primary); }
.clarity-shop-page #sod_ws .clarity-wishlist-soldout { color: var(--clarity-muted); font-size: .7rem; }
.clarity-shop-page .clarity-wishlist-pagination .pg_wrap { margin-top: 1.5rem; }

.clarity-shop-page .clarity-couponzone-pagination {
    clear: both;
    margin: -1rem 0 2.25rem;
}
.clarity-shop-page .clarity-couponzone-pagination .pg_wrap { margin-top: 0; }

@media (max-width: 720px) {
    .clarity-shop-page .clarity-wishlist-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: .35rem;
    }

    .clarity-shop-page #sod_ws .list_02 > ul {
        grid-template-columns: 1fr;
    }

    .clarity-shop-page #sod_ws .list_02 > ul > li:not(.empty_table) {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: .75rem;
        min-height: 96px;
        padding: .75rem;
    }

    .clarity-shop-page #sod_ws .sod_ws_img,
    .clarity-shop-page #sod_ws .sod_ws_img a,
    .clarity-shop-page #sod_ws .sod_ws_img img {
        width: 72px;
        height: 72px;
    }
}

.clarity-shop-page .couponzone_list { margin-bottom: 2.5rem; }
.clarity-shop-page .couponzone_list h2 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; border-top: 1px solid var(--clarity-text); margin: 0; padding: 1rem 0; font-size: 1rem; font-weight: 700; }
.clarity-shop-page .couponzone_list h2 span, .clarity-shop-page .couponzone_list h2 small { color: var(--clarity-muted); font-size: .8125rem; font-weight: 400; }
.clarity-shop-page .sct_admin { display: flex; justify-content: flex-end; margin-bottom: .75rem; }
.clarity-shop-page .sct_admin a { display: inline-grid; width: 2.25rem; height: 2.25rem; place-items: center; border: 1px solid var(--clarity-border); background: var(--clarity-surface); color: var(--clarity-muted); }
.clarity-shop-page .sct_admin a:hover { border-color: var(--clarity-primary); color: var(--clarity-primary); }

/* --- 상세 탭: 사용후기 · 상품문의 -----------------------------------------
   영카트 스킨 마크업(.sit_use_li / .sqa_section)을 그대로 쓰고 줄 모양만 준다.
   후기 본문은 스킨이 "내용보기" 창으로 띄우는 구조라 그 동작은 건드리지 않았다. */
.clarity-shop-page #sit_use_list h3, .clarity-shop-page #sqa h3 { position: absolute; overflow: hidden; clip-path: inset(50%); width: 1px; height: 1px; margin: -1px; white-space: nowrap; }
.clarity-shop-page .sit_use_top { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; border-bottom: 1px solid var(--clarity-border); padding-bottom: 1.25rem; }
.clarity-shop-page .sit_use_top h4 { color: var(--clarity-text); font-size: .9375rem; font-weight: 700; }
.clarity-shop-page .sit_use_top h4 strong { color: var(--clarity-primary); }
.clarity-shop-page .sit_use_top .sit_star { width: 6rem; }
.clarity-shop-page :is(#sit_use_wbtn, .sqa_con_btn, #sqa_sch) { margin-left: auto; }
.clarity-shop-page :is(#sit_use_wbtn, #sqa) :is(a, button) { display: inline-flex; min-height: 2.5rem; align-items: center; border: 1px solid var(--clarity-border-strong); background: var(--clarity-surface); color: var(--clarity-text-soft); cursor: pointer; padding-inline: .9rem; font-size: .8125rem; font-weight: 600; }
.clarity-shop-page :is(#sit_use_wbtn, #sqa) :is(a, button):hover { border-color: var(--clarity-primary); color: var(--clarity-primary); }

/* 사용후기 한 줄. 시안은 썸네일과 글을 좌우로 둔 단순한 flex 행이다.

   전에는 썸네일과 "내용보기" 단추를 절대배치로 좌우 끝에 박아 두고 가운데에
   제목·작성자만 남겼다. 본문이 단추 뒤에 접혀 있어서 1216px 폭의 줄에서
   실제로 쓰이는 것은 왼쪽 200px 뿐이고 가운데 900px 가 빈칸이었다. 본문을
   펴서 그 자리를 글에 준다.

   전체 후기 페이지(itemuselist.skin.php)는 마크업이 달라 아래 .sps_* 가
   따로 맡는다. .sit_thum 은 이 스킨에만 있다. */
.clarity-shop-page #sit_use_ol { margin: 0; padding: 0; list-style: none; }

.clarity-shop-page .sit_use_li {
    display: flex;
    gap: 22px;
    border-top: 1px solid var(--clarity-border);
    padding: 26px 0;
}

/* 첫 줄의 윗선은 요약 상자 아래 여백과 겹쳐 두 줄로 보인다. */
.clarity-shop-page .sit_use_li:first-child { border-top: 0; padding-top: 0; }

/* 썸네일은 후기 본문에 실제 사진이 있을 때만 스킨이 찍는다. 없으면 이 자리가
   통째로 없고 글이 줄을 다 쓴다. */
.clarity-shop-page .sit_use_li .sit_thum {
    /* 스킨 style.css 가 이 자리를 position:absolute 로 잡아 둔다(접혀 있던
       시절 글 위에 얹으려던 것). flex 행에서는 글자 위로 올라타므로
       흐름 안으로 되돌린다. */
    position: static;
    width: 110px;
    height: 110px;
    flex: none;
    overflow: hidden;
    background: var(--clarity-surface-soft);
}

.clarity-shop-page .sit_use_li .sit_thum img { display: block; width: 100%; height: 100%; object-fit: cover; }

.clarity-shop-page .sit_use_body { min-width: 0; flex: 1; }

.clarity-shop-page .sit_use_meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 9px;
}

/* 별은 바로 위 요약 상자·홈 후기 카드와 같은 글자 별을 쓴다. 코어의
   s_star*.png 를 그대로 쓰면 한 화면에 두 가지 별이 서게 된다. */
.clarity-shop-page .sit_use_star { color: var(--ondam-star, #c9a227); font-size: 12px; letter-spacing: .06em; }
.clarity-shop-page .sit_use_name { color: var(--clarity-text); font-size: 13px; font-weight: 600; }
.clarity-shop-page .sit_use_date { color: var(--clarity-muted-soft); font-size: 11.5px; }

.clarity-shop-page .sit_use_tit { margin: 0 0 4px; color: var(--clarity-text); font-size: 14.5px; font-weight: 700; }
/* 썸네일은 제목 뒤에 오는 span 이라 순서대로 흘리면 글 위로 올라탄다.
   왼쪽에 자리를 비워 두고 그 자리에 얹는다. */
.clarity-shop-page .sps_section { position: relative; display: block; float: none; width: auto; min-width: 0; min-height: 6.5rem; padding-left: 7.5rem; }
.clarity-shop-page .sps_section > span { display: block; }
/* 줄 왼쪽의 상품 이미지는 .sps_img 가 절대배치로 이미 놓고 있다. 그 폭만큼
   본문을 밀어 주지 않으면 글자가 이미지 위로 올라탄다. */
.clarity-shop-page .sps_img { width: 6rem; height: 6rem; }
.clarity-shop-page :is(.sps_img_inner, .sps_img a) { display: block; width: 100%; height: 100%; }
.clarity-shop-page .sps_img img { width: 100%; height: 100%; object-fit: cover; }
.clarity-shop-page .prd_detail { right: 0; bottom: 0; display: inline-grid; width: 1.75rem; height: 1.75rem; place-items: center; border: 0; background: var(--clarity-primary); color: #fff; cursor: pointer; font-size: .7rem; }
/* .sps_rv_thum 은 후기에 딸린 사진이다(상품 이미지가 아니다). 대개 비어 있어
   자리를 잡아 두지 않고 흐름에 둔다. */
.clarity-shop-page .sps_rv_thum:not(:empty) { display: block; margin-top: .5rem; }
.clarity-shop-page .sps_rv_thum img { display: inline-block; width: 3rem; height: 3rem; object-fit: cover; }

/* 후기·문의 목록 페이지의 검색 줄 */
.clarity-shop-page .sch_wr { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.clarity-shop-page :is(.sch_wr select, .sch_input) { min-height: 2.75rem; border: 1px solid var(--clarity-border-strong); border-radius: 0; background: var(--clarity-surface); color: var(--clarity-text); padding-inline: .75rem; font-size: .8125rem; }
.clarity-shop-page .sch_input { min-width: 14rem; }
.clarity-shop-page :is(.sch_btn, .sch_wr .btn01, .sch_wr .btn02) { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; border: 1px solid var(--clarity-border-strong); border-radius: 0; background: var(--clarity-surface); color: var(--clarity-text-soft); cursor: pointer; padding-inline: .9rem; font-size: .8125rem; font-weight: 600; }
.clarity-shop-page :is(.sch_btn, .sch_wr .btn01, .sch_wr .btn02):hover { border-color: var(--clarity-primary); color: var(--clarity-primary); }
.clarity-shop-page .sps_section > span:nth-of-type(2) img { width: 5rem; }
.clarity-shop-page .sps_pd_name { color: var(--clarity-muted-soft); font-size: .72rem; }
.clarity-shop-page .sps_rv_tit { margin-top: .15rem; color: var(--clarity-text); font-size: .9375rem; font-weight: 700; }
.clarity-shop-page .sps_con_btn { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .35rem; }
.clarity-shop-page .sps_dl { display: flex; align-items: center; gap: .75rem; margin: 0; color: var(--clarity-muted); font-size: .78rem; }
.clarity-shop-page .sps_dl dd { margin: 0; }
.clarity-shop-page .review_detail { margin-left: auto; }

/* 탭 안의 문의 목록(itemqa.skin.php). 줄 전체가 버튼이고 답변은 그 아래
   .sit_qa_con 이 열린다. 여는 동작은 스킨 JS 가 한다. */
.clarity-shop-page #sit_qa_wbtn { display: flex; justify-content: flex-end; gap: .5rem; margin-bottom: 1.25rem; }
.clarity-shop-page #sit_qa_wbtn a { display: inline-flex; min-height: 2.5rem; align-items: center; border: 1px solid var(--clarity-border-strong); background: var(--clarity-surface); color: var(--clarity-text-soft); padding-inline: .9rem; font-size: .8125rem; font-weight: 600; }
.clarity-shop-page #sit_qa_wbtn a:hover { border-color: var(--clarity-primary); color: var(--clarity-primary); }
.clarity-shop-page #sit_qa_ol { margin: 0; padding: 0; list-style: none; }
.clarity-shop-page .sit_qa_li { border-bottom: 1px solid var(--clarity-border); }
.clarity-shop-page .sit_qa_li_title { display: flex; width: 100%; align-items: center; gap: .75rem; border: 0; background: transparent; color: var(--clarity-text); cursor: pointer; padding: 1rem 0; text-align: left; font: inherit; font-size: .9375rem; font-weight: 700; }
.clarity-shop-page .sit_qa_li_title:hover { color: var(--clarity-primary); }
.clarity-shop-page .sit_qa_li_title .qa_alp, .clarity-shop-page .sit_qa_li_title strong { flex: none; }
.clarity-shop-page .sit_qa_dl { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; padding-left: 0; color: var(--clarity-muted); font-size: .78rem; }
.clarity-shop-page .sit_qa_dl dd { margin: 0; }
.clarity-shop-page .sit_qa_con { border-top: 1px dashed var(--clarity-border); padding: 1rem 0; color: var(--clarity-text-soft); font-size: .875rem; line-height: 1.75; }

/* 상품문의 목록 페이지. 이미지 · 제목 · 작성자 · 상태 칩이 따로 놀아 한 줄로
   모은다. 상태 칩은 스킨이 오른쪽에 절대배치로 띄운다. */
.clarity-shop-page #sqa { margin: 0; padding: 0; list-style: none; }
/* 목록을 감싼 ol 에 id 가 없어 줄은 내용으로 잡는다. 스킨이 id 를 낀 선택자로
   여백을 잡고 있어 클래스만으로는 이기지 못한다. 여백만 !important 로 덮는다. */
.clarity-shop-page li:has(> .sqa_section) { position: relative; border-bottom: 1px solid var(--clarity-border); padding: 1.25rem 7rem 1.25rem 5.5rem !important; }
.clarity-shop-page .sqa_img { position: absolute; top: 1.25rem; left: 0; width: 4rem; height: 4rem; }
.clarity-shop-page .sqa_img a { display: block; width: 100%; height: 100%; background: var(--clarity-surface-soft); }
.clarity-shop-page .sqa_img img { width: 100%; height: 100%; object-fit: cover; }
/* 스킨이 .sqa_section 에 float:left 와 width:1100px 를 못 박아 둔다.
   그대로 두면 1024 이하에서 줄이 화면 밖으로 200~440px 삐져나간다.
   자리는 바깥 li 의 안쪽 여백이 잡으므로 폭은 풀어 준다. */
.clarity-shop-page .sqa_section { display: flex; float: none; width: auto; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; padding: 0; }
.clarity-shop-page .sqa_section h2 { margin: 0; color: var(--clarity-text); font-size: .9375rem; font-weight: 700; }
/* 스킨은 이 칩을 오른쪽 끝에 절대배치로 띄워 내용보기 버튼과 겹친다. 흐름으로
   되돌려 제목 옆에 세운다(스킨이 id 선택자로 잡고 있어 position 만 덮는다). */
.clarity-shop-page :is(.sit_qaa_done, .sit_qaa_ing, .sit_qaa_yet) { position: static !important; display: inline-flex; min-height: 1.6rem; align-items: center; border: 1px solid var(--clarity-border-strong); border-radius: 0; background: var(--clarity-surface-soft); color: var(--clarity-text-soft); padding-inline: .5rem; font-size: .7rem; font-weight: 700; }
.clarity-shop-page .sit_qaa_done { border-color: var(--clarity-primary); background: var(--clarity-primary-soft); color: var(--clarity-primary); }
.clarity-shop-page .qa_alp { display: inline-flex; min-height: 1.5rem; align-items: center; border: 1px solid var(--clarity-border-strong); border-radius: 0; background: var(--clarity-surface-soft); color: var(--clarity-text-soft); padding-inline: .5rem; font-size: .7rem; font-weight: 700; }
.clarity-shop-page .sit_qa_qaq { color: var(--clarity-text); font-size: .9375rem; font-weight: 700; }
.clarity-shop-page .sit_qa_qaa { color: var(--clarity-text-soft); font-size: .875rem; line-height: 1.7; }
.clarity-shop-page .sqa_dl { display: flex; align-items: center; gap: .75rem; margin: 0 0 0 auto; color: var(--clarity-muted); font-size: .78rem; }
.clarity-shop-page .sqa_dl dd { margin: 0; }
.clarity-shop-page #sqa_empty { padding: 4rem 0; color: var(--clarity-muted); text-align: center; font-size: .8125rem; }

.clarity-shop-page .pg_wrap { display: flex; justify-content: center; margin-top: 2rem; }
.clarity-shop-page .pg { display: flex; gap: .25rem; }
.clarity-shop-page :is(.pg_page, .pg_current) { display: inline-grid; min-width: 2.25rem; height: 2.25rem; place-items: center; border: 1px solid var(--clarity-border); background: var(--clarity-surface); color: var(--clarity-text-soft); font-size: .8125rem; }
.clarity-shop-page .pg_current { border-color: var(--clarity-text); background: var(--clarity-text); color: var(--clarity-surface); font-weight: 700; }
.clarity-shop-page .pg_page:hover { border-color: var(--clarity-primary); color: var(--clarity-primary); }

/* --- 마이페이지 -----------------------------------------------------------
   시안은 어두운 프로필 띠(이름 + 적립금·쿠폰 같은 숫자) 아래로 주문 내역이
   이어진다. 영카트 마크업(#smb_my_ov · #smb_private · #smb_my_od)을 그대로
   두고 모양만 준다. */
.clarity-shop-page #smb_my { display: grid; gap: 2.5rem; }
.clarity-shop-page #smb_my_ov > h2 { position: absolute; overflow: hidden; clip-path: inset(50%); width: 1px; height: 1px; margin: -1px; white-space: nowrap; }
.clarity-my-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; background: var(--ondam-ink, var(--clarity-text)); padding: 1.75rem 2rem; }
.clarity-shop-page .smb_me { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; color: #fff; }
.clarity-shop-page .my_ov_name { display: flex; align-items: center; gap: 1rem; color: #fff; font-size: 1.25rem; font-weight: 700; }
.clarity-shop-page .my_ov_name img { width: 3.5rem; height: 3.5rem; border-radius: 999px; object-fit: cover; }
.clarity-shop-page .my_ov_name br { display: none; }
.clarity-shop-page .smb_me a { color: rgba(255, 255, 255, .72); font-size: .8125rem; }
.clarity-shop-page .smb_me a:hover { color: #fff; }
.clarity-shop-page #smb_private { display: flex; flex-wrap: wrap; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.clarity-shop-page #smb_private a { display: grid; gap: .35rem; color: rgba(255, 255, 255, .72); font-size: .75rem; text-align: center; }
.clarity-shop-page #smb_private a:hover { color: #fff; }
.clarity-shop-page #smb_private i { display: none; }
.clarity-shop-page #smb_private strong { color: #fff; font-size: 1.375rem; font-weight: 800; letter-spacing: -.025em; }

.clarity-shop-page #smb_my_ov h3, .clarity-shop-page #smb_my_list h2 { margin-bottom: 1rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.clarity-shop-page #smb_my_ov h3 { margin-top: 2.5rem; }
.clarity-shop-page .op_area { display: grid; grid-template-columns: 8rem minmax(0, 1fr); margin: 0; border-top: 1px solid var(--clarity-border); }
.clarity-shop-page .op_area dt { border-bottom: 1px solid var(--clarity-border); background: var(--clarity-surface-soft); padding: .8rem 1rem; color: var(--clarity-text-soft); font-size: .8125rem; font-weight: 600; }
.clarity-shop-page .op_area dd { border-bottom: 1px solid var(--clarity-border); margin: 0; padding: .8rem 1rem; color: var(--clarity-text-soft); font-size: .8125rem; }
.clarity-shop-page .withdrawal { display: inline-flex; min-height: 2.5rem; align-items: center; margin-top: 1rem; color: var(--clarity-muted); font-size: .78rem; text-decoration: underline; }

.clarity-shop-page #smb_my_list { display: grid; gap: 2.5rem; }
.clarity-shop-page #smb_my_od .tbl_head01, .clarity-shop-page #smb_my_wish .tbl_head01 { border: 0; border-top: 1px solid var(--clarity-text); border-radius: 0; background: none; }
.clarity-shop-page #smb_my_od th { background: none; color: var(--clarity-muted); font-size: .78rem; font-weight: 600; }
.clarity-shop-page #smb_my_od :is(th, td) { padding: .9rem .5rem; }
.clarity-shop-page .smb_my_more { margin-top: 1rem; text-align: right; }
.clarity-shop-page .smb_my_more a { color: var(--clarity-muted); font-size: .8125rem; }
.clarity-shop-page .smb_my_more a:hover { color: var(--clarity-primary); }
.clarity-shop-page #smb_my_wish ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.clarity-shop-page #smb_my_wish li { position: relative; min-width: 0; }
.clarity-shop-page #smb_my_wish .empty_li { grid-column: 1 / -1; border: 1px dashed var(--clarity-border); padding: 3rem 0; color: var(--clarity-muted); text-align: center; font-size: .8125rem; }
.clarity-shop-page .smb_my_img img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.clarity-shop-page .smb_my_tit { margin-top: .65rem; font-size: .8125rem; }
.clarity-shop-page .smb_my_price { margin-top: .25rem; color: var(--clarity-text); font-size: .875rem; font-weight: 700; }
.clarity-shop-page .smb_my_date { margin-top: .2rem; color: var(--clarity-muted-soft); font-size: .72rem; }
.clarity-shop-page #smb_ws_act { display: flex; gap: .5rem; margin-top: 1.25rem; }
.clarity-shop-page #smb_ws_act button { min-height: 2.75rem; border: 1px solid var(--clarity-border-strong); border-radius: 0; background: var(--clarity-surface); color: var(--clarity-text-soft); cursor: pointer; padding-inline: 1.25rem; font-size: .8125rem; font-weight: 700; }
.clarity-shop-page #smb_ws_act .btn02 { border-color: var(--clarity-primary); background: var(--clarity-primary); color: var(--color-primary-content, #fff); }

@media (max-width: 1023px) {
    .clarity-shop-page #smb_my_wish ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .clarity-my-banner { padding: 1.25rem; }
}

/* --- 주문완료 안내 ---------------------------------------------------------
   그누보드는 주문완료 페이지가 따로 없고 주문상세로 바로 보낸다. 시안의 완료
   화면은 그 위에 얹는 카드 하나로 옮겼다(방금 주문한 경우에만 나온다). */
.clarity-order-done { border: 1px solid var(--clarity-border); background: var(--clarity-surface); margin-bottom: 2.5rem; padding: 3rem 1.5rem; text-align: center; }
.clarity-order-done-mark { display: inline-grid; width: 3.5rem; height: 3.5rem; place-items: center; border-radius: 999px; background: var(--clarity-surface-soft); color: var(--clarity-primary); font-size: 1.25rem; }
.clarity-order-done h2 { margin-top: 1.25rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; }
.clarity-order-done-lead { margin-top: .65rem; color: var(--clarity-muted); font-size: .875rem; }
.clarity-order-done-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3rem; border-block: 1px solid var(--clarity-border); margin: 2rem auto 0; max-width: 46rem; padding: 1.5rem 0; }
.clarity-order-done-facts dt { color: var(--clarity-muted); font-size: .75rem; }
.clarity-order-done-facts dd { margin: .35rem 0 0; color: var(--clarity-text); font-size: .9375rem; font-weight: 700; }
.clarity-order-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 2rem; }
.clarity-shop-page .clarity-order-done-actions a { display: inline-flex; min-width: 10rem; min-height: 3rem; align-items: center; justify-content: center; border: 1px solid var(--clarity-border-strong); background: var(--clarity-surface); color: var(--clarity-text-soft); font-size: .875rem; font-weight: 700; }
.clarity-shop-page .clarity-order-done-actions a:hover { border-color: var(--clarity-primary); color: var(--clarity-primary); }
.clarity-shop-page .clarity-order-done-primary { border-color: var(--clarity-primary) !important; background: var(--clarity-primary) !important; color: var(--color-primary-content, #fff) !important; }

/* 주문상세 아래쪽 금액·결제정보. 코어가 ul/li 로 흘려보내 줄만 세워 준다. */
.clarity-shop-page #sod_fin_no { border-bottom: 1px solid var(--clarity-border); margin-bottom: 1.5rem; padding-bottom: 1rem; color: var(--clarity-muted); font-size: .8125rem; }
.clarity-shop-page #sod_fin_no strong { color: var(--clarity-text); font-weight: 700; }
.clarity-shop-page :is(#sod_bsk_tot2, #sod_fin_pay ul) { margin: 0; padding: 0; list-style: none; }
.clarity-shop-page :is(#sod_bsk_tot2, #sod_fin_pay) li { display: flex; align-items: baseline; justify-content: flex-end; gap: .25rem; border-bottom: 1px solid var(--clarity-border); padding: .7rem 0; color: var(--clarity-muted); font-size: .8125rem; }
.clarity-shop-page :is(#sod_bsk_tot2, #sod_fin_pay) li > :first-child { margin-right: auto; }
.clarity-shop-page :is(#sod_bsk_tot2, #sod_fin_pay) li strong { color: var(--clarity-text-soft); font-weight: 700; }
.clarity-shop-page #sod_bsk_tot2 { border-top: 1px solid var(--clarity-text); margin-top: 2.5rem; }
.clarity-shop-page #sod_bsk_tot2 .sod_bsk_cnt strong { color: var(--clarity-text); font-size: 1.375rem; font-weight: 800; letter-spacing: -.025em; }
.clarity-shop-page #sod_fin_pay { margin-top: 2.5rem; }
.clarity-shop-page :is(#sod_bsk_tot2, #sod_fin_pay) h3 { margin-bottom: .75rem; font-size: 1rem; font-weight: 700; }

/* 상태 설명과 주문취소는 버튼으로 여는 것이다. 스킨 CSS 없이 오니 처음부터
   펼쳐져 있었다. jQuery 가 slideDown/show 로 여니 기본값만 접어 둔다. */
.clarity-shop-page #sod_sts_explan, .clarity-shop-page #sod_cancel_pop { display: none; }
.clarity-shop-page #sod_sts_wrap { margin-top: 1rem; }
.clarity-shop-page #sod_sts_explan { border: 1px solid var(--clarity-border); margin-top: .75rem; padding: 1.25rem; }
.clarity-shop-page #sod_fin_legend { display: grid; grid-template-columns: 4rem minmax(0, 1fr); row-gap: .4rem; margin: 0; }
.clarity-shop-page #sod_fin_legend dt { color: var(--clarity-text); font-size: .8125rem; font-weight: 700; }
.clarity-shop-page #sod_fin_legend dd { margin: 0; color: var(--clarity-muted); font-size: .8125rem; }
.clarity-shop-page #sod_fin_cancel { border-top: 1px solid var(--clarity-border); margin-top: 2.5rem; padding-top: 1.5rem; }
.clarity-shop-page #sod_fin_cancel h2 { margin-bottom: .75rem; font-size: 1rem; font-weight: 700; }

/* --- 주문서 ---------------------------------------------------------------
   shop/orderform.sub.php 는 코어라 손댈 수 없다. 다행히 코어가 이미 .sod_left /
   .sod_right 로 나눠 두어, 시안처럼 왼쪽 입력 · 오른쪽 결제 카드로 세울 수 있다.
   상품 표는 두 칸 앞에 오는 형제라 그리드에서 왼쪽 칸으로 보낸다. */
.clarity-shop-page #sod_frm { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; gap: 2.5rem; }
.clarity-shop-page #sod_frm > .tbl_head03, .clarity-shop-page #sod_frm > .sod_left { grid-column: 1; min-width: 0; }
.clarity-shop-page #sod_frm > .sod_right { position: sticky; top: 5rem; grid-column: 2; grid-row: 1 / span 3; border: 1px solid var(--clarity-border); background: var(--clarity-surface); padding: 1.5rem; }

.clarity-shop-page #sod_frm > .tbl_head03 { overflow-x: auto; border: 0; border-top: 1px solid var(--clarity-text); border-radius: 0; background: none; }
.clarity-shop-page #sod_frm > .tbl_head03 th { background: none; color: var(--clarity-muted); font-size: .78rem; font-weight: 600; }
.clarity-shop-page #sod_frm > .tbl_head03 :is(th, td) { padding: 1rem .5rem; }
.clarity-shop-page #sod_frm .sod_img img { display: block; width: 4.5rem; height: 4.5rem; object-fit: cover; }

.clarity-shop-page :is(#sod_frm_orderer, #sod_frm_taker, #sod_frm_pay) { margin-top: 2.5rem; }
.clarity-shop-page .sod_left h2, .clarity-shop-page .sod_right h2 { margin-bottom: 1rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.clarity-shop-page .tbl_frm01 table { width: 100%; border-collapse: collapse; }
.clarity-shop-page .tbl_frm01 :is(th, td) { border-bottom: 1px solid var(--clarity-border); padding: .85rem 1rem; text-align: left; vertical-align: middle; font-size: .8125rem; }
.clarity-shop-page .tbl_frm01 th { width: 9rem; background: var(--clarity-surface-soft); color: var(--clarity-text-soft); font-weight: 600; }
.clarity-shop-page .tbl_frm01 tr:first-child :is(th, td) { border-top: 1px solid var(--clarity-border); }
.clarity-shop-page :is(.tbl_frm01, .sod_right) :is(input[type=text], input[type=tel], input[type=email], input[type=password], input[type=number], select, textarea) { min-height: 2.75rem; border: 1px solid var(--clarity-border-strong); border-radius: 0; background: var(--clarity-surface); color: var(--clarity-text); padding: .35rem .75rem; font-size: .8125rem; }
.clarity-shop-page .tbl_frm01 textarea { width: 100%; min-height: 5rem; }
.clarity-shop-page .tbl_frm01 .btn_frmline, .clarity-shop-page .sod_left .btn_frmline { display: inline-flex; min-height: 2.75rem; align-items: center; border: 1px solid var(--clarity-border-strong); border-radius: 0; background: var(--clarity-surface); color: var(--clarity-text-soft); cursor: pointer; padding-inline: .9rem; font-size: .8125rem; }
.clarity-shop-page .tbl_frm01 .btn_frmline:hover { border-color: var(--clarity-primary); color: var(--clarity-primary); }

/* 결제수단. 시안은 네모 칸 네 개가 나란히 선다. 코어는 라디오 + label 목록이라
   그 줄만 칸으로 세운다. */
.clarity-shop-page #sod_frm_paysel { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; margin-top: .75rem; padding: 0; }
.clarity-shop-page #sod_frm_paysel legend { margin-bottom: .5rem; color: var(--clarity-muted); font-size: .78rem; }
.clarity-shop-page #sod_frm_paysel label { display: inline-flex; min-height: 2.75rem; align-items: center; gap: .4rem; border: 1px solid var(--clarity-border-strong); background: var(--clarity-surface); color: var(--clarity-text-soft); cursor: pointer; padding-inline: .9rem; font-size: .8125rem; }
.clarity-shop-page #sod_frm_paysel input[type=radio] { accent-color: var(--clarity-primary); }
.clarity-shop-page #sod_frm_paysel label:hover { border-color: var(--clarity-primary); color: var(--clarity-primary); }

/* 오른쪽 결제 카드 안쪽. 코어는 금액을 ul > li(span 라벨 + strong 값 + "원"
   텍스트)로 뿌린다. 텍스트 노드는 감쌀 수 없으니 라벨만 왼쪽으로 밀어
   값과 단위가 오른쪽에 붙게 한다. */
.clarity-shop-page .sod_right #sod_bsk_tot { margin: 0; }
.clarity-shop-page .sod_right #sod_bsk_tot ul { margin: 0; padding: 0; list-style: none; }
.clarity-shop-page .sod_right #sod_bsk_tot li { display: flex; align-items: baseline; justify-content: flex-end; gap: .25rem; padding-block: .35rem; color: var(--clarity-muted); font-size: .8125rem; }
.clarity-shop-page .sod_right #sod_bsk_tot li > span:first-child { margin-right: auto; }
.clarity-shop-page .sod_right #sod_bsk_tot li strong { color: var(--clarity-text-soft); font-weight: 700; }
.clarity-shop-page .sod_right .sod_bsk_cnt { border-top: 1px solid var(--clarity-border); margin-top: .75rem; padding-top: 1rem; color: var(--clarity-text-soft); font-weight: 700; }
.clarity-shop-page .sod_right .sod_bsk_cnt strong { color: var(--clarity-text); font-size: 1.5rem; font-weight: 800; letter-spacing: -.025em; }

.clarity-shop-page #sod_frm_pay { border-top: 1px solid var(--clarity-border); margin-top: 1.5rem; padding-top: 1.5rem; }
.clarity-shop-page #sod_frm_pay .pay_tbl table { width: 100%; border-collapse: collapse; }
.clarity-shop-page #sod_frm_pay .pay_tbl :is(th, td) { padding: .35rem 0; text-align: left; vertical-align: top; color: var(--clarity-muted); font-size: .75rem; font-weight: 400; }
.clarity-shop-page #sod_frm_pay .pay_tbl th { width: 5rem; }
.clarity-shop-page #od_tot_price { display: flex; align-items: baseline; justify-content: flex-end; gap: .25rem; border-top: 1px solid var(--clarity-border); margin-top: 1rem; padding-top: 1rem; color: var(--clarity-text-soft); font-size: .8125rem; font-weight: 700; }
.clarity-shop-page #od_tot_price > span:first-child { margin-right: auto; }
.clarity-shop-page #od_tot_price strong { color: var(--clarity-text); font-size: 1.125rem; font-weight: 800; }
.clarity-shop-page #od_pay_sl { margin-top: 1.25rem; }
.clarity-shop-page #od_pay_sl h3 { margin-bottom: .5rem; font-size: .875rem; font-weight: 700; }
.clarity-shop-page #sod_frm_pt_alert { color: var(--clarity-muted); font-size: .72rem; line-height: 1.6; }

/* 주문/취소 버튼. 코어가 #display_pay_button.btn_confirm 안에 둔다. */
.clarity-shop-page #display_pay_button { display: grid; gap: .5rem; margin-top: 1.25rem; }
.clarity-shop-page #display_pay_button :is(a, button, input[type=submit]) { display: inline-flex; width: 100%; min-height: 3rem; align-items: center; justify-content: center; border: 1px solid var(--clarity-primary); border-radius: 0; background: var(--clarity-primary); color: var(--color-primary-content, #fff); cursor: pointer; font-size: .875rem; font-weight: 700; }
.clarity-shop-page #display_pay_button .btn_submit:hover { background: var(--clarity-primary-hover); border-color: var(--clarity-primary-hover); }
.clarity-shop-page #display_pay_button .btn01 { border-color: var(--clarity-border-strong); background: var(--clarity-surface); color: var(--clarity-text-soft); }
.clarity-shop-page #display_pay_button .btn01:hover { border-color: var(--clarity-primary); color: var(--clarity-primary); }

@media (max-width: 1023px) {
    .clarity-shop-page #sod_frm { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .clarity-shop-page #sod_frm > .sod_right { position: static; grid-column: 1; grid-row: auto; }
    .clarity-shop-page .tbl_frm01 th { width: 7rem; }
}

/* --- 장바구니 -------------------------------------------------------------
   시안은 위에 주문 단계, 아래로 왼쪽 목록 · 오른쪽 결제 예정 금액 카드다.
   표 자체는 영카트 마크업(.tbl_head03 + td_prd/td_num/td_dvr)을 그대로 쓴다. */
.clarity-order-steps { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin: 0 0 2.5rem; padding: 0; list-style: none; }
.clarity-order-steps li { display: flex; align-items: center; gap: .5rem; color: var(--clarity-muted-soft); font-size: .875rem; }
.clarity-order-steps li + li::before { content: ""; width: 2.5rem; height: 1px; background: var(--clarity-border); }
.clarity-order-step-no { display: inline-grid; width: 1.5rem; height: 1.5rem; place-items: center; border-radius: 999px; background: var(--clarity-surface-soft); color: var(--clarity-muted); font-size: .75rem; font-weight: 700; }
.clarity-order-steps .is-current { color: var(--clarity-text); font-weight: 700; }
.clarity-order-steps .is-current .clarity-order-step-no { background: var(--clarity-text); color: var(--clarity-surface); }

.clarity-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; gap: 2.5rem; }
.clarity-cart-main { min-width: 0; }
.clarity-shop-page .clarity-cart .tbl_head03 { overflow-x: auto; border: 0; border-top: 1px solid var(--clarity-text); border-radius: 0; background: none; }
.clarity-shop-page .clarity-cart .tbl_head03 th { background: none; color: var(--clarity-muted); font-size: .78rem; font-weight: 600; }
.clarity-shop-page .clarity-cart .tbl_head03 :is(th, td) { padding: 1rem .5rem; }
.clarity-shop-page .clarity-cart .selec_chk { accent-color: var(--clarity-primary); }
.clarity-shop-page .clarity-cart .td_prd { display: flex; align-items: flex-start; gap: 1rem; }
.clarity-shop-page .clarity-cart .sod_img img { display: block; width: 5rem; height: 5rem; object-fit: cover; }
.clarity-shop-page .clarity-cart .sod_name { min-width: 0; }
.clarity-shop-page .clarity-cart .prd_name { color: var(--clarity-text); font-size: .875rem; font-weight: 700; }
.clarity-shop-page .clarity-cart .sod_opt { margin-top: .35rem; color: var(--clarity-muted); font-size: .78rem; }
.clarity-shop-page .clarity-cart .sod_option_btn { margin-top: .5rem; }
.clarity-shop-page .clarity-cart .mod_options { border: 1px solid var(--clarity-border-strong); background: var(--clarity-surface); color: var(--clarity-text-soft); cursor: pointer; padding: .3rem .6rem; font-size: .72rem; }
.clarity-shop-page .clarity-cart .mod_options:hover { border-color: var(--clarity-primary); color: var(--clarity-primary); }
.clarity-shop-page .clarity-cart :is(.td_num, .td_dvr) { color: var(--clarity-text-soft); font-size: .8125rem; text-align: center; }
.clarity-shop-page .clarity-cart .td_numbig { color: var(--clarity-text); font-size: .9375rem; font-weight: 700; text-align: right; }
.clarity-shop-page .clarity-cart .empty_table { padding: 4rem 0; color: var(--clarity-muted); text-align: center; }
.clarity-shop-page .clarity-cart .btn_cart_del { display: flex; gap: .5rem; margin-top: 1.25rem; }
.clarity-shop-page .clarity-cart .btn_cart_del button { min-height: 2.5rem; border: 1px solid var(--clarity-border-strong); background: var(--clarity-surface); color: var(--clarity-text-soft); cursor: pointer; padding-inline: 1rem; font-size: .8125rem; }
.clarity-shop-page .clarity-cart .btn_cart_del button:hover { border-color: var(--clarity-primary); color: var(--clarity-primary); }

/* 결제 예정 금액 카드. 목록이 길어져도 따라오도록 위에 붙여 둔다.
   고정 헤더(57px)에 가리지 않게 그만큼 내려 잡는다. */
.clarity-shop-page .clarity-cart-summary { position: sticky; top: 5rem; border: 1px solid var(--clarity-border); background: var(--clarity-surface); padding: 1.5rem; }
.clarity-cart-summary-title { margin-bottom: 1.25rem; font-size: 1rem; font-weight: 700; }
.clarity-cart-summary-list { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: .65rem; margin: 0; }
.clarity-cart-summary-list dt { color: var(--clarity-muted); font-size: .8125rem; }
.clarity-cart-summary-list dd { margin: 0; color: var(--clarity-text-soft); font-size: .8125rem; text-align: right; }
.clarity-cart-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--clarity-border); margin-top: 1.25rem; padding-top: 1.25rem; }
.clarity-cart-total span { color: var(--clarity-text-soft); font-size: .875rem; font-weight: 700; }
.clarity-cart-total strong { color: var(--clarity-text); font-size: 1.5rem; font-weight: 800; letter-spacing: -.025em; }
/* 스킨이 #sod_bsk_act 로 버튼 색을 잡고 있어(id 가 들어가 더 세다) 여기서도
   같은 id 를 써야 이긴다. */
.clarity-shop-page #sod_bsk_act.clarity-cart-actions { display: grid; gap: .5rem; margin-top: 1.25rem; }
.clarity-shop-page #sod_bsk_act.clarity-cart-actions :is(a, button) { display: inline-flex; float: none; width: 100%; min-height: 3rem; align-items: center; justify-content: center; border: 1px solid var(--clarity-primary); border-radius: 0; background: var(--clarity-primary); color: var(--color-primary-content, #fff); cursor: pointer; font-size: .875rem; font-weight: 700; }
.clarity-shop-page #sod_bsk_act.clarity-cart-actions .btn01 { border-color: var(--clarity-border-strong); background: var(--clarity-surface); color: var(--clarity-text-soft); }
.clarity-shop-page #sod_bsk_act.clarity-cart-actions .btn_submit:hover { background: var(--clarity-primary-hover); border-color: var(--clarity-primary-hover); }
.clarity-shop-page #sod_bsk_act.clarity-cart-actions .btn01:hover { border-color: var(--clarity-primary); color: var(--clarity-primary); }
.clarity-cart-note { margin-top: 1rem; color: var(--clarity-muted); font-size: .75rem; }

@media (max-width: 1023px) {
    .clarity-cart-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .clarity-shop-page .clarity-cart-summary { position: static; }
}

.clarity-shop-page .tbl_head01, .clarity-shop-page .tbl_head03 { overflow-x: auto; border: 1px solid var(--clarity-border); border-radius: .625rem; background: var(--clarity-surface); }
.clarity-shop-page .tbl_head01 table, .clarity-shop-page .tbl_head03 table { min-width: 42rem; width: 100%; border-collapse: collapse; }
.clarity-shop-page .tbl_head01 th, .clarity-shop-page .tbl_head01 td, .clarity-shop-page .tbl_head03 th, .clarity-shop-page .tbl_head03 td { border-bottom: 1px solid var(--clarity-border); padding: .8rem .75rem; color: var(--clarity-text-soft); font-size: .78rem; text-align: left; }
.clarity-shop-page .tbl_head01 th, .clarity-shop-page .tbl_head03 th { background: var(--clarity-surface-soft); color: var(--clarity-text); font-weight: 850; }
.clarity-shop-page .tbl_head01 tr:last-child td, .clarity-shop-page .tbl_head03 tr:last-child td { border-bottom: 0; }

.clarity-shop-footer { border-top: 1px solid var(--clarity-border); background: var(--clarity-surface); }
.clarity-shop-footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 1.25rem 2rem; padding: 2rem 0; }
.clarity-shop-footer-brand p { margin-top: .65rem; color: var(--clarity-muted); font-size: .75rem; }
.clarity-shop-footer-links { display: flex; flex-wrap: wrap; gap: 1rem; align-items: start; justify-content: flex-end; }
.clarity-shop-footer-links a { color: var(--clarity-muted); font-size: .75rem; }
.clarity-shop-footer-links a:hover { color: var(--clarity-primary); }
.clarity-shop-footer-info { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem 1rem; border-top: 1px solid var(--clarity-border); padding-top: 1rem; color: var(--clarity-muted); font-size: .7rem; }
.clarity-shop-footer-copy { grid-column: 1 / -1; color: var(--clarity-muted); font-size: .7rem; }

@media (min-width: 64rem) { .clarity-shop-category { left: 2rem; } }

@media (max-width: 1023px) {
    .clarity-shop-mainbar { gap: 1rem; }
    .clarity-shop-account span { display: none; }
    .clarity-shop-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .clarity-shop-type-nav a { padding-inline: .5rem; }
    .clarity-shop-container { grid-template-columns: 1fr; }
    .clarity-shop-sidebar, .clarity-shop-container > .shop-content, .clarity-shop-container > #aside + .shop-content { grid-column: 1; }
    .clarity-shop-sidebar { display: none; }
    .clarity-shop-page .sct { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
    .clarity-shop-shell { width: calc(100% - 1.5rem); }
    .clarity-shop-mainbar { gap: .5rem; }
    .clarity-shop-brand img { height: 28px; }
    .clarity-shop-search { height: 2.75rem; }
    .clarity-shop-actions { gap: .25rem; }
    .clarity-shop-search-toggle, .clarity-shop-account { width: 2.5rem; padding: 0; }
    .clarity-shop-category { position: fixed; z-index: 200; inset: 0; width: 100%; }
    .clarity-shop-category-backdrop { position: absolute; inset: 0; display: block; background: color-mix(in srgb, var(--clarity-text) 48%, transparent); }
    .clarity-shop-category-panel { position: absolute; inset: 0 3rem 0 0; overflow-y: auto; border: 0; border-radius: 0; box-shadow: 16px 0 36px color-mix(in srgb, var(--clarity-text) 20%, transparent); }
    .clarity-shop-category-grid { grid-template-columns: 1fr; padding: 1rem; }
    .clarity-shop-type-nav { display: none; }
    .clarity-shop-wrapper { min-height: 30rem; }
    .clarity-shop-container { display: block; width: 100%; padding: 1rem .75rem 2.5rem; }
    .clarity-shop-page-title { margin-bottom: 1rem; }
    .clarity-shop-page-title h1 { font-size: 1.4rem; }
    .clarity-shop-hero { min-height: 18rem; border-radius: .75rem; padding: 1.75rem 1.25rem; }
    .clarity-shop-hero h1 { font-size: 2.25rem; }
    .clarity-shop-hero p { font-size: .8rem; }
    .clarity-shop-hero-art { right: -8rem; width: 22rem; height: 16rem; }
    .clarity-shop-product-section { border-radius: .625rem; padding: .875rem; }
    .clarity-shop-section-head { align-items: end; }
    .clarity-shop-section-head h2 { font-size: 1rem; }
    .clarity-shop-section-head .btn { padding-inline: .5rem; font-size: .68rem; }
    .clarity-shop-page .sct { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .clarity-shop-page .sct_li { padding: .45rem; }
    .clarity-shop-page .sct_ct_wrap { padding: .55rem .15rem .15rem; }
    .clarity-shop-page .sct_txt { min-height: 2.5rem; }
    .clarity-shop-page .sct_txt a { font-size: .76rem; }
    .clarity-shop-page .sct_cost { font-size: .85rem; }
    .clarity-shop-page .sct_btn { right: .55rem; bottom: 3.8rem; left: .55rem; }
    .clarity-shop-page #sit_ov_wrap { grid-template-columns: 1fr; gap: 1rem; padding: .75rem; }
    .clarity-shop-page #sit_title { font-size: 1.3rem; }
    .clarity-shop-page #sit_ov_btn { grid-template-columns: 1fr 1fr auto; }
    .clarity-shop-footer-inner { display: block; padding: 1.5rem .75rem; }
    .clarity-shop-footer-links { justify-content: flex-start; margin-top: 1.25rem; }
    .clarity-shop-footer-info { margin-top: 1.25rem; }
    .clarity-shop-footer-copy { margin-top: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .clarity-shop-header-sticky, .clarity-shop-page .clarity-shop-mainbar, .clarity-shop-page .clarity-shop-brand img,
    .clarity-shop-category, .clarity-shop-search, .clarity-shop-page .sct_li, .clarity-shop-page .sct_btn { transition: none; }
}

/* Mobile shop shell. The mobile shop entrypoints keep Gnuboard URLs and forms, while the controls use a touch-sized Clarity layer. */
.clarity-shop-mobile-mainbar { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; min-height: 4.25rem; align-items: center; gap: .5rem; }
.clarity-shop-mobile-mainbar .clarity-shop-brand { justify-self: start; }
.clarity-shop-mobile-mainbar .clarity-shop-brand img { height: 28px; }
.clarity-shop-mobile-actions { display: flex; align-items: center; gap: .15rem; }
.clarity-shop-mobile-icon { position: relative; display: inline-grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 0; border-radius: .5rem; background: transparent; color: var(--clarity-text-soft); cursor: pointer; font: inherit; }
.clarity-shop-mobile-icon:hover, .clarity-shop-mobile-icon:focus-visible { background: var(--clarity-primary-soft); color: var(--clarity-primary); }
.clarity-shop-mobile-cart .clarity-shop-cart-count { top: .08rem; right: .02rem; }
.clarity-shop-mobile-search { display: none; width: min(100% - 1.5rem, 40rem); min-height: 2.75rem; margin: 0 auto .75rem; align-items: center; border: 1px solid var(--clarity-border-strong); border-radius: .5rem; background: var(--clarity-surface-soft); }
.clarity-shop-mobile-search.is-open { display: flex; }
.clarity-shop-mobile-search input { min-width: 0; flex: 1; height: 2.65rem; border: 0; outline: 0; background: transparent; color: var(--clarity-text); padding: 0 .8rem; font: inherit; font-size: .8rem; }
.clarity-shop-mobile-search button { display: inline-grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 0; background: transparent; color: var(--clarity-primary); cursor: pointer; }
.clarity-shop-mobile-category { position: fixed; z-index: 220; inset: 0; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .16s, visibility .16s; }
.clarity-shop-mobile-category.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
.clarity-shop-mobile-category-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--clarity-text) 48%, transparent); }
.clarity-shop-mobile-category-panel { position: absolute; inset: 0 2.5rem 0 0; overflow-y: auto; background: var(--clarity-surface); box-shadow: 16px 0 36px color-mix(in srgb, var(--clarity-text) 20%, transparent); transform: translateX(-1rem); transition: transform .16s; }
.clarity-shop-mobile-category.is-open .clarity-shop-mobile-category-panel { transform: translateX(0); }
.clarity-shop-mobile-category-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--clarity-border); padding: 1.25rem .9rem 1rem; }
.clarity-shop-mobile-category-head h2 { margin-top: .25rem; font-size: 1.2rem; font-weight: 950; }
.clarity-shop-mobile-category-nav { padding: .5rem .9rem; }
.clarity-shop-mobile-category-nav ul { margin: 0; padding: 0; list-style: none; }
.clarity-shop-mobile-category-nav > ul > li { border-bottom: 1px solid var(--clarity-border); }
.clarity-shop-mobile-category-nav li > a { display: block; min-height: 2.75rem; padding: .8rem .2rem; color: var(--clarity-text); font-size: .85rem; font-weight: 800; }
.clarity-shop-mobile-category-nav li > a:hover, .clarity-shop-mobile-category-nav li > a:focus-visible { color: var(--clarity-primary); }
.clarity-shop-mobile-category-nav details { border-top: 1px solid var(--clarity-border); }
.clarity-shop-mobile-category-nav summary { display: flex; min-height: 2.25rem; align-items: center; justify-content: space-between; color: var(--clarity-muted); cursor: pointer; font-size: .72rem; list-style: none; }
.clarity-shop-mobile-category-nav summary::-webkit-details-marker { display: none; }
.clarity-shop-mobile-category-nav details[open] > summary i { transform: rotate(180deg); }
.clarity-shop-mobile-category-nav details ul { padding: 0 0 .35rem .75rem; }
.clarity-shop-mobile-category-nav details li > a { min-height: 2.2rem; padding: .55rem .2rem; color: var(--clarity-text-soft); font-size: .78rem; font-weight: 650; }
.clarity-shop-mobile-category-links { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; border-top: 1px solid var(--clarity-border); padding: 1rem .9rem 2rem; }
.clarity-shop-mobile-category-links a { display: flex; min-height: 2.5rem; align-items: center; gap: .45rem; border-radius: .45rem; background: var(--clarity-surface-soft); color: var(--clarity-text-soft); padding: 0 .65rem; font-size: .72rem; font-weight: 700; }
.clarity-shop-mobile-category-links a:hover, .clarity-shop-mobile-category-links a:focus-visible { background: var(--clarity-primary-soft); color: var(--clarity-primary); }
.clarity-shop-mobile-category-links i { color: var(--clarity-primary); }
.clarity-shop-menu-open { overflow: hidden; }

@media (min-width: 640px) {
    .clarity-shop-mobile-page .clarity-shop-mobile-header { display: none; }
}

@media (max-width: 639px) {
    .clarity-shop-mobile-page .clarity-shop-footer-inner { padding-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .clarity-shop-mobile-category, .clarity-shop-mobile-category-panel { transition: none; }
}