/* Custom CSS for NakedHTML (Migrated from legacy DB system) */

:root { --primary: #333333; --primary-hover: #000000; --bg: #ffffff; --bg-alt: #f8f9fa; --text: #212529; --text-muted: #6c757d; --border: #dee2e6; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --radius: 0.375rem; }
body { margin: 0; padding: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; font-size: 1rem; -webkit-text-size-adjust: 100%; }
main, .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
a, a:link, a:visited { color: var(--primary); text-decoration: none; transition: color 0.15s ease-in-out; }
a:hover, a:active { color: var(--primary-hover); text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; color: var(--text); }
h1 { font-size: 2.5rem; border-bottom: 2px solid var(--bg-alt); padding-bottom: 10px; margin-bottom: 20px; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
p { margin-top: 0; margin-bottom: 1rem; }
input, select, textarea { display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--text); background-color: var(--bg); background-clip: padding-box; border: 1px solid var(--border); appearance: none; border-radius: var(--radius); transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; margin-bottom: 1rem; box-sizing: border-box; }
input:focus, select:focus, textarea:focus { color: var(--text); background-color: var(--bg); border-color: #999; outline: 0; box-shadow: 0 0 0 0.25rem rgba(153,153,153,.25); }
input[type="checkbox"], input[type="radio"] { appearance: auto; width: auto; display: inline-block; margin-right: 0.5rem; margin-bottom: 0; }
.custom-control { display: block; margin-bottom: 0.5rem; }
.custom-control-inline { display: inline-flex; align-items: center; margin-right: 1rem; }
button, input[type="submit"], input[type="button"], .btn, [class*="btn-"], [class*="button_"] { display: inline-block; font-weight: 400; line-height: 1.5; color: #ffffff !important; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; background-color: var(--primary, #000000) !important; border: 1px solid var(--primary, #000000) !important; text-shadow: none !important; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: var(--radius); transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
button:hover, input[type="submit"]:hover, input[type="button"]:hover, .btn:hover, [class*="btn-"]:hover, [class*="button_"]:hover { color: #ffffff !important; background-color: var(--primary-hover, #333333) !important; border-color: var(--primary-hover, #333333) !important; }
categorycontent, .pl, .cbc { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.pc, .cc { display: flex; flex-direction: column; background-color: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; text-align: center; height: 100%; box-sizing: border-box; }
.pc img, .cc img { width: 100% !important; height: 150px !important; object-fit: contain; margin-bottom: 1rem; border-radius: calc(var(--radius) - 1px); }
.pc .price { font-size: 1.25rem; font-weight: bold; color: var(--text); margin-top: auto; padding-top: 1rem; }
.pc .title { font-size: 1rem; font-weight: 500; margin-bottom: 0.5rem; display: block; }
header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid var(--border); background: var(--bg-alt); }
.logo img { max-height: 50px; width: auto; }
nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
nav ul li { display: inline-block; }
nav ul li a { display: block; padding: 0.5rem; color: var(--text); font-weight: 500; }
nav ul li a:hover, nav ul li a.active { color: var(--primary); }
table { width: 100%; margin-bottom: 1rem; color: var(--text); vertical-align: top; border-color: var(--border); border-collapse: collapse; }
th, td { padding: 0.5rem; border-bottom: 1px solid var(--border); text-align: left; }
th { font-weight: 600; background-color: var(--bg-alt); }
tbody tr:hover { color: var(--text); background-color: rgba(0,0,0,.025); }
.tc, .text-center { text-align: center; }
.txt-r, .text-right { text-align: right; }
.mb-3 { margin-bottom: 1rem; }
.mt-3 { margin-top: 1rem; }
.alert { position: relative; padding: 1rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: var(--radius); }
.alert-success { color: #0f5132; background-color: #d1e7dd; border-color: #badbcc; }
.alert-danger { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; }
.cbh, .ch, .h3 { font-size: 1.5rem; font-weight: 500; line-height: 1.2; margin-top: 0; margin-bottom: 1.5rem; color: var(--text); padding: 0.75rem 1.25rem; background-color: var(--bg-alt); border: 1px solid var(--border); border-bottom: 2px solid var(--border); border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; width: 100%; box-sizing: border-box; }
.rpg { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1.5rem !important; }
.gi { display: grid !important; grid-template-rows: subgrid !important; grid-row: span 4 !important; gap: 0 !important; }
.nav { display: flex !important; flex-wrap: wrap !important; padding-left: 0 !important; margin-bottom: 0 !important; list-style: none !important; }
.jcc { justify-content: center !important; }
.cf { width: 100% !important; padding-right: 15px !important; padding-left: 15px !important; margin-right: auto !important; margin-left: auto !important; }
.sd:target, .categories-nav ul:target, .tnmc > li:hover .sd, #nm .nn > .ni:hover .sd, #nm .navbar-nav > .nav-item:hover .sd, .categories-nav > li:hover > ul, .tnmc > li:focus-within .sd, #nm .nn > .ni:focus-within .sd, #nm .navbar-nav > .nav-item:focus-within .sd, .categories-nav > li:focus-within > ul, .sd.sd-open { display:flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-content: flex-start !important; justify-content: flex-start !important; }
.tnmc ul.sd, #nm ul.sd, .sd, .categories-nav ul { display:none; flex-direction: column !important; flex-wrap: nowrap !important; margin: 8px 0 !important; scroll-margin-top: 100vh !important; padding: 0 0 0 10px !important; position:absolute !important; background:#fff; z-index:1000; float:none !important; list-style:none; min-width:200px; max-width:100vw; gap: 6px !important; box-shadow:0 4px 6px rgba(0,0,0,0.1); top: 100% !important; left: 0 !important; margin-top: 4px !important; margin-left: 0 !important; padding-left: 0 !important; padding-bottom: 10px !important; padding-top: 8px !important; }
.tnmc ul.sd li, #nm ul.sd li, .sd li, .categories-nav ul li { display:flex !important; margin: 0 !important; padding: 0 !important; float:none !important; clear:both !important; width: 100% !important; flex: 0 0 100% !important; }
.tnmc ul.sd li a, #nm ul.sd li a, .tnmc ul.sd li a.nl, #nm ul.sd li a.nl, .sd li a.nl, .categories-nav ul li a { display:block !important; white-space:normal !important; word-wrap: break-word !important; max-width: 100% !important; padding: 4px 10px !important; margin: 0 !important; color:#333 !important; text-decoration:none !important; font-size: 0.9em; line-height: 1.2 !important; width:100% !important; clear:both !important; background: transparent !important; border: none !important; border-radius: 0 !important; }
.tnmc ul.sd li a:hover, #nm ul.sd li a:hover, .sd li a.nl:hover, #tnav .nav-link:hover, #nm .nav-link:hover, .categories-nav ul li a:hover { color:#000 !important; background: transparent !important; text-decoration: underline !important; }
.nn { -ms-overflow-style:none;scrollbar-width:none; }
.nn::-webkit-scrollbar { display:none; }
nav[aria-label="Top Navigation"] { display:flex;justify-content:space-between;align-items:center;width:100%; }
nav[aria-label="Top Navigation"] > div:first-child { display:flex;justify-content:flex-start;align-items:center;width:100%;flex-wrap:nowrap; }
.ml-auto { margin-left:auto !important; }
nav[aria-label="Top Navigation"] > div:first-child ul { display:flex;list-style:none;margin:0;padding:0;align-items:center; }
form[name="quick_find_header"] button[type="submit"].sbi { background:transparent !important;border:none !important;padding:0 0 0 8px;margin:0;display:flex;align-items:center;font-size:1.2rem;filter:grayscale(100%) blur(0.5px);opacity:0.7; }
.tnmc { padding-bottom:5px;margin-bottom:5px;width:100%; }
button[data-target="#navbarSupportedContent"].hm, #nt { height:44px; border:1px solid var(--border) !important; border-radius:var(--radius); outline:none; background:transparent !important; box-shadow:none; padding:0 12px; margin-left:10px; font-size:1.5rem; display:flex !important; align-items:center; justify-content:center; color:var(--text) !important; }
#dsw,#dsw > div { width:100%; display:block; }
form[name="quick_find_header"] { display:block !important;position:static !important;box-shadow:none !important;border:none !important;width:100% !important;max-width:100% !important; }
form[name="quick_find_header"] div.sic { display:flex;align-items:center;height:100%;width:100% !important;max-width:600px;margin:0 auto;justify-content:flex-start; }
form[name="quick_find_header"] input[name="keyword"].sim { flex-grow:1;width:100% !important;min-width:0;background-color:transparent;border-radius:0;margin:0; }
div#navbarSupportedContent > ul:first-of-type { line-height:1;margin-bottom:0; }
@media (min-width: 992px) {
    #navbarSupportedContent {
        display: block !important;
    }
    #nt, button.hm {
        display: none !important;
    }
}
ul[id^="m"] { margin-top:0; }
.h { display:none !important; }
*, *::before, *::after { box-sizing: border-box !important; }
html, body { overflow-x: hidden !important; max-width: 100vw !important; }
body:not(.ui-rendered) { opacity: 0 !important; }
body.ui-rendered { opacity: 1 !important; transition: opacity 0.2s ease-in-out !important; }
.navbar-nav { display: flex; flex-direction: row !important; flex-wrap: wrap !important; overflow-x: visible !important; width: auto; padding: 0 !important; margin: 0 !important; gap: 10px !important; list-style: none !important; }
.navbar-nav > li { flex: 0 0 auto !important; position: relative !important; }
.navbar-nav a { display: inline-block !important; width: auto !important; white-space: nowrap !important; padding: 8px 12px !important; background: transparent !important; border: none !important; text-decoration: none !important; color: #333 !important; }
.navbar-nav a:hover { color:#000 !important; background: transparent !important; text-decoration: underline !important; }
.nav-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border); list-style: none; padding-left: 0; margin-bottom: 0; }
.nav-tabs .nav-link { display: block; padding: 0.5rem 1rem; border: 1px solid transparent; border-top-left-radius: .25rem; border-top-right-radius: .25rem; color: var(--text); text-decoration: none; }
.nav-tabs .nav-link.active { color: var(--text); background-color: var(--bg); border-color: var(--border) var(--border) var(--bg); border-bottom-color: transparent; }
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }
.card { width: 100% !important; break-inside: avoid; page-break-inside: avoid; position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: var(--bg); background-clip: border-box; border: 1px solid var(--border); border-radius: .25rem; margin-bottom: 1rem; }
.card-header { padding: .75rem 1.25rem; margin-bottom: 0; background-color: rgba(0,0,0,.03); border-bottom: 1px solid var(--border); font-size: 1.1rem; }
.card-body { flex: 1 1 auto; padding: 1.25rem; }
.pt-3 { padding-top: 1rem; }
.justify-content-between { justify-content: space-between; display: flex; width: 100%; }
.justify-content-end { justify-content: flex-end; display: flex; width: 100%; }
#navBreadCrumb { background-color: lightgray; padding: 0.5rem 1rem; border-radius: 0.25rem; margin-bottom: 1rem; }
#navBreadCrumb a { color: #333; text-decoration: underline; }
#navBreadCrumb a:hover { color: #000; }
nav[aria-label="Footer Navigation"] ul { justify-content: center; }
#footer-wrapper, #footerWrapper { text-align: center; width: 100%; display: block; }
.sort-container-wrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px; margin-bottom: 1.5rem; margin-right: 0.5rem; width: 100%; }
.sort-container-label { margin: 0; font-weight: 500; white-space: nowrap; }
.sort-container-form { display: flex; flex-direction: row; align-items: stretch; margin: 0; padding: 0; width: 100%; flex: 1 1 100%; }
.sort-container-form select { flex: 1; margin: 0; height: 38px; box-sizing: border-box; }
.sort-container-form button { margin-left: 10px; margin-bottom: 0; margin-top: 0; height: 38px; box-sizing: border-box; white-space: nowrap; display: flex; align-items: center; justify-content: center; }
a.btn.btn-primary { display: inline-block; font-weight: 500; line-height: 1.5; color: #fff; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; background-color: #0d6efd; border: 1px solid #0d6efd; padding: .375rem .75rem; font-size: 1rem; border-radius: .25rem; transition: background-color .15s ease-in-out; }
a.btn.btn-primary:hover { background-color: #0b5ed7; border-color: #0a58ca; }
.product-1col-row { display: flex; flex-wrap: wrap; gap: 15px; border-bottom: 1px solid var(--border, #dee2e6); padding-bottom: 1.5rem; margin-bottom: 1.5rem; align-items: stretch; }
.product-1col-img { flex: 1 1 100%; max-width: 100%; text-align: center; }
.product-1col-content { flex: 1 1 100%; max-width: 100%; display: flex; flex-direction: column; }

@media (min-width: 768px) and (max-width: 1199.98px) {
    .rpg { grid-template-columns: repeat(2, 1fr) !important; }
    #headerPlaceholder { min-height:290px; }
    #tnav .container { max-width: 100% !important; margin: 0 auto; }
    .card-columns { column-count: 2; column-gap: 1.25rem; }
}

@media (max-width: 767.98px) {
    .rpg { grid-template-columns: 1fr !important; }
    #headerPlaceholder { min-height:220px; }
    .card-columns { column-count: 1; }
}

@media (min-width: 1200px) {
    #headerPlaceholder { min-height:calc(290px + 3vw); }
    #nsm { position:static; flex: 0 0 600px !important; width: 600px !important; max-width: 600px !important; display:block; margin:0 1rem 0 1rem; }
    .card-columns { column-count: 2; column-gap: 1.25rem; }
}

@media (max-width: 1199.98px) {
    #nsm { position:static; flex: 0 0 90% !important; width: 90% !important; max-width: 90% !important; display:block; margin:10px auto; }
    nav[aria-label="Top Navigation"] > div:first-child { flex-wrap: wrap !important; justify-content: center !important; }
    nav[aria-label="Top Navigation"] > div:first-child ul { flex-wrap: wrap !important; justify-content: center !important; gap: 10px !important; }
}

@media (min-width: 768px) {
    .hm, .navbar-toggler { display: none !important; }
    .sort-container-form { flex: 1; }
    .product-1col-row { flex-wrap: nowrap; }
    .product-1col-img { flex: 0 0 250px; max-width: 250px; text-align: left !important; }
    .product-1col-img img, .product-1col-img picture { margin-left: 0 !important; margin-right: auto !important; display: block; }
    .product-1col-content { flex: 1 1 0%; max-width: calc(100% - 265px); }
}

.store-btn { width: 120px !important; align-self: flex-end; text-align: center; display: inline-block; background-color: var(--primary, #000) !important; border-color: var(--primary, #000) !important; color: #fff !important; }
.store-btn:hover { background-color: darkblue !important; border-color: darkblue !important; color: #fff !important; }
.centerBoxHeading { margin-bottom: 0 !important; padding-bottom: 0 !important; margin-top: 1em !important; }

@media (max-width: 991.98px) {
    #ntw { position: relative; }
    #navbarSupportedContent.show, #navbarSupportedContent.collapsing {
        position: absolute;
        top: 55px;
        left: 0;
        right: 0;
        z-index: 1050;
        background-color: var(--bg);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 1rem;
    }
}