/*
 * shop.css — uRADMonitor product catalogue styles
 *
 * Same design system as the dashboard (d10 tokens), scoped to .urm-shop so it
 * cannot leak into the rest of the theme. Theme follows the navbar toggle via
 * the data-d10-theme attribute set by the page script.
 *
 * Layout: category filter, then a two column split of product list and product
 * detail on desktop. Below 900px the list becomes a dropdown and the detail
 * stacks, so the page stays usable one-handed on a phone.
 *
 * (C) 2015 - 2026 Magnasci SRL, www.magnasci.com
 * Radu Motisan, radu.motisan@magnasci.com
 * Global Environmental Monitoring Network
 */

/* ── tokens ─────────────────────────────────────────────────────── */
.urm-shop {
    --d10-bg:#0e1116; --d10-bg-alt:#161b22; --d10-card:#1a2029; --d10-card-2:#232a36;
    --d10-border:#2a3340; --d10-text:#e6edf3; --d10-text-dim:#8590a3;
    --d10-text-mu:#5b6677; --d10-accent:#3aa0ff; --d10-r:8px;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    font-size:13px; color:var(--d10-text);
    background-color:var(--d10-bg);
    padding:14px 15px 28px; box-sizing:border-box; overflow-x:hidden;
}
.urm-shop[data-d10-theme="light"] {
    --d10-bg:#f3f5f9; --d10-bg-alt:#fff; --d10-card:#fff; --d10-card-2:#eef1f6;
    --d10-border:#d4dae6; --d10-text:#1c2430; --d10-text-dim:#4e5a6e;
    --d10-text-mu:#8a96aa; --d10-accent:#1a73e8;
}
.urm-shop *, .urm-shop *::before, .urm-shop *::after { box-sizing:border-box; }
.urm-shop a { color:var(--d10-accent); text-decoration:none; }
.urm-shop a:hover { text-decoration:underline; }
[x-cloak] { display:none !important; }

/* ── category filter: scrollable pill row ───────────────────────── */
.shop-cats {
    display:flex; gap:6px; overflow-x:auto; padding-bottom:8px;
    margin-bottom:14px; border-bottom:1px solid var(--d10-border);
    -webkit-overflow-scrolling:touch; 
}
.shop-cats::-webkit-scrollbar { height:5px; }
.shop-cats::-webkit-scrollbar-thumb { background:var(--d10-border); border-radius:3px; }
.shop-cat {
    flex:0 0 auto; height:28px; padding:0 13px; border-radius:14px;
    display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
    background:var(--d10-card); border:1px solid var(--d10-border);
    /* the theme styles every <a>, so the pill colours need to win explicitly:
       without this the selected pill rendered accent text on accent background
       and became invisible */
    color:var(--d10-text-dim) !important;
    font-size:12px; font-weight:600; text-decoration:none !important;
    transition:background .12s,color .12s,border-color .12s;
}
.shop-cat:hover {
    background:var(--d10-card-2); color:var(--d10-text) !important;
}
.shop-cat-on, .shop-cat-on:hover, .shop-cat-on:focus {
    background:var(--d10-accent) !important;
    border-color:var(--d10-accent) !important;
    color:#ffffff !important;
}
.shop-cat-badge {
    background:#c62828; color:#fff; font-size:9px; font-weight:700;
    padding:1px 5px; border-radius:8px; text-transform:uppercase;
}

/* ── main split ─────────────────────────────────────────────────── */
.shop-split { display:grid; grid-template-columns:250px 1fr; gap:16px; align-items:start; }
@media (max-width:900px) { .shop-split { grid-template-columns:1fr; gap:12px; } }

/* product list, desktop */
.shop-list {
    display:flex; flex-direction:column; gap:3px;
    max-height:70vh; overflow-y:auto; padding-right:4px;
}
.shop-list::-webkit-scrollbar { width:6px; }
.shop-list::-webkit-scrollbar-thumb { background:var(--d10-border); border-radius:3px; }
@media (max-width:900px) { .shop-list { display:none; } }

.shop-list-item {
    display:flex; align-items:center; gap:8px;
    padding:8px 10px; border-radius:6px; cursor:pointer;
    background:transparent !important; border:1px solid transparent;
    color:var(--d10-text-dim) !important; font-size:12px; text-align:left; width:100%;
    box-shadow:none !important; text-shadow:none !important;
    transition:background .12s,color .12s;
}
.shop-list-item:hover {
    background:var(--d10-card-2) !important; color:var(--d10-text) !important;
}
.shop-list-item-on, .shop-list-item-on:hover {
    background:var(--d10-card) !important; border-color:var(--d10-accent);
    color:var(--d10-text) !important; font-weight:600;
}
.shop-list-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shop-list-price { font-family:ui-monospace,"JetBrains Mono",monospace; font-size:11px; color:var(--d10-text-mu); }
.shop-list-item-on .shop-list-price { color:var(--d10-accent); }

/* product picker, mobile only */
.shop-picker { display:none; }
@media (max-width:900px) {
    .shop-picker { display:block; margin-bottom:4px; }
}

/* ── product detail card ────────────────────────────────────────── */
.shop-detail {
    background:var(--d10-card); border:1px solid var(--d10-border);
    border-radius:var(--d10-r); overflow:hidden;
}
.shop-detail-grid { display:grid; grid-template-columns:300px 1fr; gap:0; }
@media (max-width:1100px) { .shop-detail-grid { grid-template-columns:240px 1fr; } }
@media (max-width:700px)  { .shop-detail-grid { grid-template-columns:1fr; } }

/* gallery */
.shop-gallery { padding:16px; border-right:1px solid var(--d10-border); }
@media (max-width:700px) { .shop-gallery { border-right:none; border-bottom:1px solid var(--d10-border); } }
.shop-photo {
    width:100%; border-radius:6px; display:block;
    background:var(--d10-bg-alt); border:1px solid var(--d10-border);
}
.shop-thumbs { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.shop-thumb {
    width:52px; height:52px; object-fit:cover; border-radius:4px; cursor:pointer;
    border:1px solid var(--d10-border); opacity:.6; transition:opacity .12s,border-color .12s;
}
.shop-thumb:hover { opacity:1; }
.shop-thumb-on { opacity:1; border-color:var(--d10-accent); }
.shop-hwver {
    text-align:center; font-size:10px; color:var(--d10-text-mu);
    margin-top:10px; text-transform:uppercase; letter-spacing:.06em;
}

/* body */
.shop-body { padding:16px 18px; min-width:0; }
.shop-title-row { display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.shop-title { font-size:19px; font-weight:700; color:var(--d10-text); margin:0; flex:1; min-width:0; }
.shop-desc { font-size:13px; line-height:1.65; color:var(--d10-text-dim); margin:8px 0 14px; }
.shop-desc b { color:var(--d10-text); }

/* stock badge */
.shop-stock {
    display:inline-flex; align-items:center; gap:6px;
    font-size:11px; font-weight:600; padding:3px 9px; border-radius:12px;
}
.shop-stock-available { background:#1b3a25; color:#7be094; }
.shop-stock-limited   { background:#3a3320; color:#e0c67b; }
.shop-stock-out       { background:#3a1b1b; color:#ee8a8a; }
.urm-shop[data-d10-theme="light"] .shop-stock-available { background:#d6f3dd; color:#1c6431; }
.urm-shop[data-d10-theme="light"] .shop-stock-limited   { background:#fdf3d6; color:#7a5a00; }
.urm-shop[data-d10-theme="light"] .shop-stock-out       { background:#f7d7d7; color:#8a1f1f; }
.shop-stock-dot { width:7px; height:7px; border-radius:50%; background:currentColor; }

/* fact rows */
.shop-facts { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.shop-fact { display:flex; gap:10px; font-size:12px; align-items:baseline; }
.shop-fact-k {
    flex:0 0 92px; font-size:9px; font-weight:700; text-transform:uppercase;
    letter-spacing:.07em; color:var(--d10-text-dim); padding-top:2px;
}
.shop-fact-v { flex:1; min-width:0; color:var(--d10-text); line-height:1.55; }
.shop-links { display:flex; gap:6px; flex-wrap:wrap; }
.shop-link {
    height:24px; padding:0 10px; border-radius:5px; font-size:11px; font-weight:600;
    display:inline-flex; align-items:center;
    background:var(--d10-card-2); border:1px solid var(--d10-border); color:var(--d10-text);
}
.shop-link:hover { background:var(--d10-border); text-decoration:none; }

/* ── purchase panel ─────────────────────────────────────────────── */
.shop-buy {
    background:var(--d10-bg-alt); border:1px solid var(--d10-border);
    border-radius:var(--d10-r); padding:14px 16px; margin-top:4px;
}
.shop-price-row { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.shop-price {
    font-family:ui-monospace,"JetBrains Mono",monospace;
    font-size:26px; font-weight:700; color:var(--d10-text); line-height:1.1;
}
.shop-strike { color:var(--d10-text-mu); font-size:15px; text-decoration:line-through; }
.shop-save {
    background:#c62828; color:#fff; font-size:10px; font-weight:700;
    padding:2px 7px; border-radius:10px; text-transform:uppercase; letter-spacing:.04em;
}
.shop-price-note { font-size:11px; color:var(--d10-text-dim); margin-bottom:12px; }

.shop-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin-bottom:12px; }
.shop-field { display:flex; flex-direction:column; gap:4px; }
.shop-lbl {
    font-size:9px; font-weight:700; text-transform:uppercase;
    letter-spacing:.07em; color:var(--d10-text-dim);
}
.shop-sel, .shop-inp {
    height:32px; width:100%; padding:0 9px; border-radius:5px;
    background:var(--d10-bg); color:var(--d10-text);
    border:1px solid var(--d10-border);
    font:13px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    transition:border-color .12s;
}
.shop-sel:focus, .shop-inp:focus { outline:none; border-color:var(--d10-accent); }
.shop-sel option { background:var(--d10-card); }
.urm-shop[data-d10-theme="light"] .shop-sel,
.urm-shop[data-d10-theme="light"] .shop-inp { background:#f0f4fa; color:#1c2430; border-color:#d4dae6; }

/* buttons */
.shop-btn {
    height:36px; padding:0 20px; border-radius:6px; border:none; cursor:pointer;
    font:13px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    font-weight:600; display:inline-flex; align-items:center; justify-content:center;
    gap:6px; white-space:nowrap; text-decoration:none;
    transition:opacity .12s,background .12s;
}
.shop-btn:disabled { opacity:.45; cursor:not-allowed; }
.shop-btn-buy {
    background:var(--d10-accent) !important; color:#fff !important;
    width:100%; box-shadow:none !important; text-shadow:none !important;
}
.shop-btn-buy:hover:not(:disabled) { opacity:.87; text-decoration:none; }
.shop-btn-ghost {
    background:var(--d10-card-2) !important; color:var(--d10-text) !important;
    border:1px solid var(--d10-border) !important;
}
.shop-btn-ghost:hover { background:var(--d10-border) !important; text-decoration:none; }
.shop-paypal { margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.shop-cards { height:22px; margin-top:8px; opacity:.85; }

/* order summary lines */
.shop-total-lines { display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.shop-line {
    display:flex; justify-content:space-between; gap:12px;
    font-size:12px; color:var(--d10-text-dim); align-items:baseline;
}
.shop-line span:last-child { color:var(--d10-text); text-align:right; }
.shop-line small { color:var(--d10-text-mu); }
.shop-line-total {
    border-top:1px solid var(--d10-border); padding-top:8px; margin-top:2px;
}
.shop-total {
    font-family:ui-monospace,"JetBrains Mono",monospace;
    font-size:18px; font-weight:700; color:var(--d10-accent) !important;
}
.shop-note { font-size:10px; color:var(--d10-text-mu); font-style:italic; }

/* messages */
.shop-msg {
    background:var(--d10-card-2); border:1px solid var(--d10-border);
    border-radius:6px; padding:10px 12px; font-size:12px; color:var(--d10-text-dim);
}
.shop-out-note { font-size:12px; color:#ee8a8a; }

/* long description block, included from the per-product php files */
.shop-longdesc {
    margin-top:16px; padding:16px 18px;
    border-top:1px solid var(--d10-border);
    font-size:13px; line-height:1.65; color:var(--d10-text-dim);
}
.shop-longdesc img { max-width:100%; height:auto; border-radius:6px; }
.shop-longdesc table { width:100%; border-collapse:collapse; font-size:12px; margin:10px 0; }
.shop-longdesc th, .shop-longdesc td { padding:6px 9px; border-bottom:1px solid var(--d10-border); text-align:left; }
.shop-longdesc th { color:var(--d10-text); font-weight:600; }
.shop-longdesc h1, .shop-longdesc h2, .shop-longdesc h3, .shop-longdesc h4 {
    color:var(--d10-text); font-size:15px; margin:16px 0 8px;
}

/* testimonial */
.shop-quote {
    margin-top:14px; padding:10px 14px; border-left:2px solid var(--d10-border);
    font-size:12px; font-style:italic; color:var(--d10-text-mu); line-height:1.6;
}


/* ── Products page shell ──────────────────────────────────────────
   The theme leaves the page background white. The class below is the
   one WordPress puts on <body> for this page template; the inline
   script also sets it on the element, because WordPress injects an
   inline body style that outranks any stylesheet.                  */
body.page-template-page-templates-products-php {
    background-color:#0e1116 !important;
    max-width:none !important;
    margin:0 !important; padding:0 !important;
    border:none !important; box-shadow:none !important;
}
body.page-template-page-templates-products-php .subhead {
    background-color:#161b22 !important;
    border-bottom:1px solid #2a3340 !important;
}
body.page-template-page-templates-products-php .subhead h3 { color:#e6edf3 !important; }

body.page-template-page-templates-products-php.urm-page-light {
    background-color:#f3f5f9 !important;
}
body.page-template-page-templates-products-php.urm-page-light .subhead {
    background-color:#ffffff !important; border-bottom-color:#d4dae6 !important;
}
body.page-template-page-templates-products-php.urm-page-light .subhead h3 { color:#1c2430 !important; }

/* the shop sits inside .container > .row, whose Bootstrap negative margins
   push it past the container edge */
body.page-template-page-templates-products-php .container { max-width:100% !important; }
body.page-template-page-templates-products-php .container > .row {
    margin-left:0 !important; margin-right:0 !important;
}

/* buy and ghost buttons must beat the theme's button styling */
.urm-shop button.shop-btn, .urm-shop a.shop-btn {
    text-shadow:none !important; box-shadow:none !important;
    -webkit-appearance:none !important; appearance:none !important;
}
.urm-shop a.shop-link {
    color:var(--d10-text) !important; text-decoration:none !important;
}
.urm-shop a.shop-link:hover { background:var(--d10-border) !important; }


/* ── documentation tabs inside the long description ───────────────
   These come from the per-product php files and are Bootstrap markup,
   so they need restyling to match the rest of the page. Each pane has
   an id ending in the product id, which is what makes deep links such
   as /products/?sel=4#docs-4 possible.                              */
.shop-longdesc .nav-tabs {
    display:flex; gap:4px; overflow-x:auto; flex-wrap:nowrap;
    border-bottom:1px solid var(--d10-border) !important;
    margin:0 0 14px; padding:0 0 6px; list-style:none;
    -webkit-overflow-scrolling:touch;
}
.shop-longdesc .nav-tabs::-webkit-scrollbar { height:4px; }
.shop-longdesc .nav-tabs::-webkit-scrollbar-thumb { background:var(--d10-border); border-radius:2px; }
.shop-longdesc .nav-tabs > li { float:none !important; margin:0 !important; flex:0 0 auto; }
.shop-longdesc .nav-tabs > li > a {
    display:inline-flex; align-items:center; height:28px; padding:0 12px;
    border:1px solid transparent !important; border-radius:6px !important;
    background:transparent !important; margin:0 !important;
    color:var(--d10-text-dim) !important; font-size:12px; font-weight:600;
    text-decoration:none !important; white-space:nowrap;
    transition:background .12s,color .12s;
}
.shop-longdesc .nav-tabs > li > a:hover {
    background:var(--d10-card-2) !important; color:var(--d10-text) !important;
}
.shop-longdesc .nav-tabs > li.active > a,
.shop-longdesc .nav-tabs > li.active > a:hover,
.shop-longdesc .nav-tabs > li.active > a:focus {
    background:var(--d10-card-2) !important;
    border-color:var(--d10-accent) !important;
    color:var(--d10-text) !important;
}
.shop-longdesc .tab-content { background:transparent !important; border:none !important; }
.shop-longdesc .tab-pane { display:none; }
.shop-longdesc .tab-pane.active { display:block; }
/* scroll target sits clear of the fixed navbar */
.shop-longdesc .tab-pane { scroll-margin-top:60px; }

/* ── Small screens ─────────────────────────────────────────────────
   Grid and flex children default to min-width:auto, so they refuse to
   shrink below their content's intrinsic width and push the whole page
   wider than the viewport. Everything below either allows shrinking or
   caps a width that could otherwise overflow.                        */

/* nothing may exceed the viewport on this template */
body.page-template-page-templates-products-php {
    overflow-x: hidden !important;
}

/* let every grid and flex child shrink */
.shop-split,
.shop-split > *,
.shop-detail-grid > *,
.shop-body,
.shop-fact,
.shop-fact-v,
.shop-title-row,
.shop-price-row,
.shop-buy,
.shop-fields > * {
    min-width: 0;
}

/* long words, urls and part numbers must break rather than stretch */
.shop-desc,
.shop-fact-v,
.shop-longdesc,
.shop-line,
.shop-msg {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* media and tables inside the imported product descriptions */
.shop-detail img,
.shop-longdesc img,
.shop-longdesc iframe,
.shop-longdesc video {
    max-width: 100% !important;
    height: auto;
}
.shop-longdesc table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 700px) {
    /* tighter frame, the screen is the constraint now */
    .urm-shop      { padding: 12px 10px 24px; }
    .shop-gallery  { padding: 12px; }
    .shop-body     { padding: 14px 14px; }
    .shop-buy      { padding: 12px; }

    /* stock badge drops under the title instead of squeezing it */
    .shop-title-row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .shop-title     { font-size: 17px; }
    .shop-stock     { white-space: normal; }

    /* label above value, rather than a fixed 92px column beside it */
    .shop-fact      { flex-direction: column; gap: 4px; }
    .shop-fact-k    { flex: none; }

    /* one field per row keeps the selects readable */
    .shop-fields    { grid-template-columns: 1fr; }

    /* order summary lines stack when the two halves no longer fit */
    .shop-line      { flex-wrap: wrap; }
    .shop-line span:last-child { text-align: left; }

    .shop-price     { font-size: 23px; }
    .shop-longdesc  { padding: 14px; }
}

@media (max-width: 420px) {
    .urm-shop     { padding: 10px 8px 20px; }
    .shop-thumb   { width: 44px; height: 44px; }
    .shop-link    { font-size: 10px; padding: 0 8px; }
}