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

   HorizonMart — MegaMart Skin

   Classic marketplace experience

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



/* --- Reset --- */

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }



/* --- Variables --- */

:root {

    --hm-header: #131921;

    --hm-header2: #232f3e;

    --hm-srch-btn: #febd69;

    --hm-srch-btn-h: #f3a847;

    --hm-srch-focus: #f90;

    --hm-accent: #ff9900;

    --hm-link: #007185;

    --hm-link-h: #c7511f;

    --hm-deal: #cc0c39;

    --hm-star: #de7921;

    --hm-gold1: #f7dfa5;

    --hm-gold2: #f0c14b;

    --hm-gold-b: #a88734;

    --hm-org1: #ffb347;

    --hm-org2: #ff9900;

    --hm-org-b: #c77600;

    --hm-bg: #eaeded;

    --hm-card: #fff;

    --hm-text: #0f1111;

    --hm-text2: #565959;

    --hm-border: #ddd;

    --hm-div: #e7e7e7;

    --hm-prime: #00a4b4;

    --hm-green: #007600;

    --hm-foot: #232f3e;

    --hm-foot2: #131a22;

    --hm-font: Arial, sans-serif;

}



/* --- Body --- */

body {

    font-family: var(--hm-font);

    background: var(--hm-bg);

    color: var(--hm-text);

    font-size: 14px;

    line-height: 1.35;

    -webkit-font-smoothing: antialiased;

}



/* --- Links & Buttons --- */

a { color: var(--hm-link); text-decoration: none; }

a:hover { color: var(--hm-link-h); text-decoration: underline; }

button { font-family: var(--hm-font); }



/* --- Header --- */

.hm-header { background: var(--hm-header); position: sticky; top: 0; z-index: 1000; }

.hm-header-main {

    display: flex; align-items: center; padding: 8px 12px;

    max-width: 1500px; margin: 0 auto; gap: 6px; height: 60px;

}

.hm-logo { flex-shrink: 0; padding: 6px 8px; border: 1px solid transparent; border-radius: 2px; cursor: pointer; }

.hm-logo:hover { border-color: #fff; }

.hm-logo-text { color: #fff; font-size: 21px; font-weight: 700; letter-spacing: -.5px; }

.hm-logo-text b { color: var(--hm-accent); }



.hm-deliver {

    flex-shrink: 0; display: flex; align-items: flex-end; padding: 6px 8px;

    border: 1px solid transparent; border-radius: 2px; cursor: pointer;

    color: #ccc; font-size: 12px; gap: 3px; line-height: 1.15;

}

.hm-deliver:hover { border-color: #fff; }

.hm-deliver strong { color: #fff; font-size: 14px; display: block; }



/* --- Search Bar --- */

.hm-search { flex: 1; display: flex; height: 40px; border-radius: 4px; overflow: hidden; border: 2px solid transparent; }

.hm-search:focus-within { border-color: var(--hm-srch-focus); }

.hm-search-cat {

    background: #e6e6e6; border: none; padding: 0 20px 0 10px; font-size: 12px;

    color: #555; border-right: 1px solid #cdcdcd; cursor: pointer;

    font-family: var(--hm-font); -webkit-appearance: none; appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E");

    background-repeat: no-repeat; background-position: right 6px center;

}

.hm-search-input {

    flex: 1; border: none; padding: 0 12px; font-size: 15px;

    outline: none; font-family: var(--hm-font); min-width: 0;

}

.hm-search-btn {

    background: var(--hm-srch-btn); border: none; width: 46px; cursor: pointer;

    display: flex; align-items: center; justify-content: center; flex-shrink: 0;

}

.hm-search-btn:hover { background: var(--hm-srch-btn-h); }



/* --- Header Nav Links --- */

.hm-nav {

    flex-shrink: 0; padding: 6px 8px; border: 1px solid transparent; border-radius: 2px;

    cursor: pointer; color: #ccc; font-size: 12px; line-height: 1.15;

    text-decoration: none; white-space: nowrap; background: none;

}

.hm-nav:hover { border-color: #fff; text-decoration: none; color: #ccc; }

.hm-nav strong { color: #fff; font-size: 14px; display: block; }



/* --- Skin Selector --- */

.hm-skin-nav { position: relative; flex-shrink: 0; }

.hm-skin-btn {

    padding: 6px 8px; border: 1px solid transparent; border-radius: 2px;

    cursor: pointer; color: #ccc; font-size: 12px; line-height: 1.15;

    background: none; display: flex; align-items: center; gap: 4px; white-space: nowrap;

}

.hm-skin-btn:hover { border-color: #fff; }

.hm-skin-btn strong { color: #fff; font-size: 14px; display: block; }

.hm-skin-dd {

    display: none; position: absolute; top: calc(100% + 4px); right: 0;

    background: #fff; border: 1px solid #ccc; border-radius: 4px;

    box-shadow: 0 2px 12px rgba(0,0,0,.25); width: 260px; z-index: 2000;

}

.hm-skin-dd.open { display: block; }

.hm-skin-dd::before {

    content: ''; position: absolute; top: -6px; right: 20px;

    width: 12px; height: 12px; background: #fff;

    border-left: 1px solid #ccc; border-top: 1px solid #ccc; transform: rotate(45deg);

}

.hm-skin-dd-title { padding: 12px 14px 8px; font-size: 15px; font-weight: 700; border-bottom: 1px solid var(--hm-div); }

.hm-skin-opt {

    display: flex; align-items: center; gap: 10px; padding: 10px 14px;

    cursor: pointer; border: none; background: none; width: 100%;

    text-align: left; font-family: var(--hm-font); font-size: 13px; color: var(--hm-text);

}

.hm-skin-opt:hover { background: #f0f2f5; }

.hm-skin-opt.active { background: #edfdff; }

.hm-skin-sw {

    width: 32px; height: 32px; border-radius: 4px; border: 2px solid #ddd;

    display: flex; align-items: center; justify-content: center;

    font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0;

}

.hm-skin-opt.active .hm-skin-sw { border-color: var(--hm-link); }

.hm-skin-nm { font-weight: 700; line-height: 1.2; }

.hm-skin-ds { font-size: 11px; color: var(--hm-text2); }



/* --- Cart Widget --- */

.hm-cart-w {

    display: flex; align-items: flex-end; position: relative;

    padding: 6px 8px; border: 1px solid transparent; border-radius: 2px;

    cursor: pointer; gap: 2px;

}

.hm-cart-w:hover { border-color: #fff; }

.hm-cart-n { position: absolute; top: 0; left: 16px; color: var(--hm-accent); font-size: 16px; font-weight: 700; line-height: 1; }

.hm-cart-l { color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 1px; }



/* --- Sub Navigation --- */

.hm-sub { background: var(--hm-header2); }

.hm-sub-in {

    display: flex; align-items: center; max-width: 1500px;

    margin: 0 auto; padding: 0 4px; height: 39px;

    overflow-x: auto; scrollbar-width: none;

}

.hm-sub-in::-webkit-scrollbar { display: none; }

.hm-si {

    padding: 8px 9px; color: #fff; font-size: 13px; white-space: nowrap;

    border: 1px solid transparent; border-radius: 2px; cursor: pointer;

    text-decoration: none; background: none; font-family: var(--hm-font);

    display: flex; align-items: center; gap: 4px;

}

.hm-si:hover { border-color: #fff; color: #fff; text-decoration: none; }

.hm-si.b { font-weight: 700; }

.hm-si.deal { color: #f3a847; font-weight: 700; }



/* --- Hero Carousel --- */

.hm-hero { position: relative; max-width: 1500px; margin: 0 auto; height: 340px; overflow: hidden; }

.hm-hero-sl { display: flex; transition: transform .5s ease; height: 100%; }

.hm-hero-s {

    min-width: 100%; display: flex; align-items: center;

    justify-content: center; padding: 30px 100px; gap: 50px;

}

.hm-hero-s h2 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }

.hm-hero-s p { font-size: 14px; color: var(--hm-text2); margin-bottom: 14px; line-height: 1.5; }

.hm-hero-s a { color: var(--hm-link); font-size: 14px; }

.hm-hero-box {

    width: 340px; height: 260px; background: #fff; border-radius: 8px;

    box-shadow: 0 2px 8px rgba(0,0,0,.08); display: flex;

    align-items: center; justify-content: center; flex-shrink: 0;

}

.hm-hero-nav {

    position: absolute; top: 0; bottom: 80px; width: 55px;

    display: flex; align-items: center; justify-content: center;

    cursor: pointer; background: none; border: none; z-index: 10; color: #555;

}

.hm-hero-nav:hover { color: #111; }

.hm-hero-nav.prev { left: 0; }

.hm-hero-nav.next { right: 0; }



/* --- Category Cards --- */

.hm-cats {

    max-width: 1500px; margin: -80px auto 20px; padding: 0 16px;

    display: grid; grid-template-columns: repeat(4, 1fr);

    gap: 20px; position: relative; z-index: 5;

}

.hm-cc { background: var(--hm-card); padding: 20px; }

.hm-cc h3 { font-size: 21px; font-weight: 700; margin-bottom: 14px; }

.hm-cg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 14px; }

.hm-ci { cursor: pointer; }

.hm-ci-img {

    width: 100%; aspect-ratio: 1; background: #f3f3f3; border-radius: 2px;

    margin-bottom: 4px; display: flex; align-items: center; justify-content: center;

}

.hm-ci span { font-size: 12px; }

.sm { color: var(--hm-link); font-size: 13px; }



/* --- Product Sections --- */

.hm-sec { max-width: 1500px; margin: 0 auto; padding: 0 16px 20px; }

.hm-sec-h { font-size: 21px; font-weight: 700; padding: 16px 0 14px; }

.hm-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }



/* --- Product Cards --- */

.hm-c {

    background: var(--hm-card); padding: 12px; cursor: pointer;

    position: relative; transition: box-shadow .15s;

}

.hm-c:hover { box-shadow: 0 2px 12px rgba(15,17,17,.2); z-index: 2; }

.hm-c-img {

    width: 100%; aspect-ratio: 1; display: flex; align-items: center;

    justify-content: center; margin-bottom: 8px; background: #fff;

}

.ph {

    width: 100%; height: 100%;

    background: linear-gradient(145deg, #f8f8f8, #eee);

    display: flex; align-items: center; justify-content: center;

}

.ni {

    position: absolute; top: 8px; left: 8px; background: var(--hm-green);

    color: #fff; font-size: 10px; font-weight: 700; padding: 2px 6px;

    border-radius: 2px; letter-spacing: .3px;

}

.dl {

    position: absolute; top: 8px; right: 8px; background: var(--hm-deal);

    color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 2px;

}

.hm-ct {

    font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2;

    -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; margin-bottom: 4px;

}

.hm-c:hover .hm-ct { color: var(--hm-link-h); }



/* --- Stars & Prices --- */

.st { display: inline-flex; align-items: center; gap: 1px; margin-bottom: 2px; }

.sf { color: var(--hm-star); }

.se { color: #ddd; }

.st svg { width: 15px; height: 15px; }

.sc { font-size: 12px; color: var(--hm-link); margin-left: 4px; }

.pl { margin-bottom: 2px; white-space: nowrap; }

.ps { font-size: 13px; vertical-align: top; line-height: 1.1; }

.pw { font-size: 28px; font-weight: 400; line-height: 1; }

.pd { font-size: 13px; vertical-align: top; line-height: 1.1; }

.pm { font-size: 12px; color: var(--hm-text2); text-decoration: line-through; margin-left: 6px; }

.sv { font-size: 12px; color: var(--hm-deal); font-weight: 700; }



/* --- HorizonFast Badge --- */

.hf { display: inline-flex; align-items: center; gap: 3px; margin-bottom: 2px; }

.hf-c { color: var(--hm-prime); display: flex; }

.hf-c svg { width: 14px; height: 14px; }

.hf-t {

    font-size: 13px; font-weight: 700; font-style: italic;

    background: linear-gradient(90deg, #00a4b4, #007185);

    -webkit-background-clip: text; -webkit-text-fill-color: transparent;

    letter-spacing: -.3px;

}

.dv { font-size: 12px; color: var(--hm-text2); }

.dv strong { color: var(--hm-text); }

.sl { font-size: 12px; color: var(--hm-text2); margin-top: 4px; }



/* --- Page Routing --- */

.hm-page { display: none; }

.hm-page.active { display: block; }



/* --- Breadcrumb --- */

.hm-bc { max-width: 1500px; margin: 0 auto; padding: 10px 16px 0; font-size: 12px; color: var(--hm-text2); }

.hm-bc a { color: var(--hm-link); font-size: 12px; }

.hm-bc em { margin: 0 4px; font-style: normal; }



/* --- Product Detail --- */

.hm-det { max-width: 1500px; margin: 0 auto; padding: 16px; background: #fff; }

.hm-det-g { display: grid; grid-template-columns: 400px 1fr 280px; gap: 20px; align-items: start; }

.hm-det-imgs { position: sticky; top: 120px; }

.hm-det-mi {

    width: 100%; aspect-ratio: 1; background: #fff; display: flex;

    align-items: center; justify-content: center;

    border: 1px solid var(--hm-border); border-radius: 4px;

    overflow: hidden; margin-bottom: 10px;

}

.hm-det-th { display: flex; gap: 8px; flex-wrap: wrap; }

.hm-th {

    width: 56px; height: 56px; border: 2px solid var(--hm-border);

    border-radius: 4px; cursor: pointer; overflow: hidden;

    display: flex; align-items: center; justify-content: center; background: #fff;

}

.hm-th:hover, .hm-th.active { border-color: var(--hm-accent); }

.hm-det-info { padding-right: 16px; }

.hm-det-t { font-size: 24px; font-weight: 400; line-height: 1.3; margin-bottom: 4px; }

.hm-det-by { font-size: 14px; margin-bottom: 8px; }

.hm-det-by a { color: var(--hm-link); }

.hm-det-r {

    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;

    padding-bottom: 8px; border-bottom: 1px solid var(--hm-div); flex-wrap: wrap;

}

.hm-det-r .st svg { width: 18px; height: 18px; }

.hm-det-r .sc { font-size: 14px; }

.hm-det-b { font-size: 14px; color: var(--hm-text2); }

.hm-det-pb { padding: 12px 0; border-bottom: 1px solid var(--hm-div); }

.hm-det-pl { font-size: 14px; color: var(--hm-text2); margin-bottom: 2px; }

.hm-det-pb .pw { font-size: 28px; }

.hm-det-ml { font-size: 14px; color: var(--hm-text2); margin-top: 4px; }

.hm-det-ml .sk { text-decoration: line-through; }

.hm-det-sv { color: var(--hm-deal); font-weight: 700; }

.hm-det-ab { padding: 12px 0; border-bottom: 1px solid var(--hm-div); }

.hm-det-ab h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }

.hm-det-ab ul { padding-left: 18px; }

.hm-det-ab li { font-size: 14px; margin-bottom: 6px; line-height: 1.45; }



/* --- Buy Box --- */

.bb { border: 1px solid var(--hm-border); border-radius: 8px; padding: 20px; position: sticky; top: 120px; }

.bb .pl { margin-bottom: 6px; }

.bb .pw { font-size: 18px; }

.bb-dv { font-size: 14px; margin-bottom: 4px; }

.bb-dv strong { color: var(--hm-text); }

.bb-fs { font-size: 14px; margin-bottom: 10px; }

.bb-sk { font-size: 18px; color: var(--hm-green); margin-bottom: 12px; }

.bb-sk.low { color: var(--hm-deal); }

.bb-q { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; }

.bb-q select {

    padding: 4px 8px; border: 1px solid #ddd; border-radius: 4px;

    background: #f0f2f2; font-family: var(--hm-font); font-size: 13px; cursor: pointer;

}

.bc {

    width: 100%; padding: 10px; border: 1px solid var(--hm-gold-b); border-radius: 20px;

    background: linear-gradient(to bottom, var(--hm-gold1), var(--hm-gold2));

    font-size: 14px; cursor: pointer; margin-bottom: 8px; font-family: var(--hm-font);

}

.bc:hover { background: linear-gradient(to bottom, #f5d78e, #eeb933); }

.bn {

    width: 100%; padding: 10px; border: 1px solid var(--hm-org-b); border-radius: 20px;

    background: linear-gradient(to bottom, var(--hm-org1), var(--hm-org2));

    font-size: 14px; cursor: pointer; margin-bottom: 12px; font-family: var(--hm-font);

}

.bn:hover { background: linear-gradient(to bottom, #f5a623, #e68a00); }

.bb-sc { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--hm-link); margin-bottom: 12px; }

.bb-sc svg { width: 14px; height: 14px; }

.bb-sl { font-size: 12px; color: var(--hm-text2); line-height: 1.6; }

.bb-sl a { font-size: 12px; }

.bb hr { border: none; border-top: 1px solid var(--hm-div); margin: 12px 0; }

.bb-gf { display: flex; align-items: center; gap: 8px; font-size: 14px; }

.bb-gf input { accent-color: var(--hm-accent); width: 16px; height: 16px; }



/* --- Related Carousel --- */

.hm-car { max-width: 1500px; margin: 0 auto; padding: 0 16px 20px; }

.hm-car-h { font-size: 21px; font-weight: 700; padding: 20px 0 14px; }

.hm-car-t {

    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;

    scrollbar-width: none; padding-bottom: 8px;

}

.hm-car-t::-webkit-scrollbar { display: none; }

.hm-car-c {

    flex: 0 0 195px; scroll-snap-align: start; background: var(--hm-card);

    padding: 12px; cursor: pointer;

}

.hm-car-c:hover { box-shadow: 0 2px 10px rgba(15,17,17,.2); }

.hm-car-c .hm-ct { font-size: 12px; }

.hm-car-c .pw { font-size: 18px; }



/* --- Sidebar Overlay --- */

.hm-ov { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 2000; }

.hm-ov.open { display: block; }

.hm-sb {

    position: fixed; top: 0; left: -366px; width: 365px; height: 100%;

    background: #fff; z-index: 2001; overflow-y: auto; transition: left .25s ease;

}

.hm-sb.open { left: 0; }

.hm-sb-hd {

    background: var(--hm-header2); color: #fff; padding: 14px 20px;

    font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px;

}

.hm-sb-av {

    width: 28px; height: 28px; background: #546e7a; border-radius: 50%;

    display: flex; align-items: center; justify-content: center;

}

.hm-sb-av svg { width: 16px; height: 16px; fill: #fff; }

.hm-sb-sec { padding: 10px 0; border-bottom: 1px solid var(--hm-div); }

.hm-sb-st { font-size: 17px; font-weight: 700; padding: 10px 24px 6px; }

.hm-sb-lk {

    display: flex; align-items: center; justify-content: space-between;

    padding: 10px 24px; color: var(--hm-text); text-decoration: none;

    font-size: 14px; cursor: pointer;

}

.hm-sb-lk:hover { background: #eee; text-decoration: none; color: var(--hm-text); }

.hm-sb-cl {

    position: absolute; top: 10px; right: -44px; width: 36px; height: 36px;

    background: none; border: none; color: #fff; cursor: pointer;

    display: flex; align-items: center; justify-content: center;

}



/* --- Back to Top --- */

.hm-btt {

    display: block; text-align: center; background: #37475a; color: #fff;

    padding: 14px; font-size: 13px; cursor: pointer; text-decoration: none;

}

.hm-btt:hover { background: #485769; color: #fff; text-decoration: none; }



/* --- Footer --- */

.hm-ft { background: var(--hm-foot); padding: 40px 0; }

.hm-ft-c {

    max-width: 1100px; margin: 0 auto; display: grid;

    grid-template-columns: repeat(4, 1fr); gap: 30px; padding: 0 20px;

}

.hm-ft-c h4 { color: #fff; font-size: 16px; margin-bottom: 14px; }

.hm-ft-c a { display: block; color: #ddd; font-size: 13px; padding: 4px 0; text-decoration: none; }

.hm-ft-c a:hover { text-decoration: underline; color: #fff; }

.hm-fb { background: var(--hm-foot2); padding: 30px 20px; text-align: center; }

.hm-fb-l { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 10px; }

.hm-fb-l b { color: var(--hm-accent); }

.hm-fb-lg { font-size: 11px; color: #999; }



/* --- Responsive --- */

@media (max-width: 1024px) {

    .hm-cats { grid-template-columns: repeat(2, 1fr); }

    .hm-det-g { grid-template-columns: 1fr; }

    .bb, .hm-det-imgs { position: static; }

}

@media (max-width: 768px) {

    .hm-deliver, .hm-skin-nav { display: none; }

    .hm-cats { grid-template-columns: 1fr; margin-top: -40px; }

    .hm-hero { height: 200px; }

    .hm-hero-s { padding: 20px 60px; gap: 20px; }

    .hm-hero-box { width: 160px; height: 130px; }

    .hm-g { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    .hm-ft-c { grid-template-columns: repeat(2, 1fr); }

}