/* ============================================================
   Catalogue listing (responsive grid + sidebar)
   Reference-style: left sidebar with root/child tree,
   right product grid. Mirrors jomola.com visual rhythm.
   ============================================================ */
.jomola-archive-layout{
    display:grid;
    grid-template-columns:300px minmax(0,1fr);
    gap:46px;
    align-items:start;
    margin-top:24px;
}

/* ===== Sidebar ============================================ */
.jomola-category-sidebar{
    border-top:2px solid var(--green);
    background:#fff;
    position:sticky;
    top:98px;
}
.sidebar-label{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-weight:700;
    color:var(--muted);
    padding:20px 20px 12px;
}
.sidebar-all{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    padding:12px 16px;
    font-weight:700;
    color:var(--green);
    border-bottom:1px solid var(--line);
    background:linear-gradient(90deg, rgba(100,28,134,.06), transparent);
}
.sidebar-all.is-current{
    background:linear-gradient(90deg, rgba(100,28,134,.14), transparent);
}

.sidebar-group{
    border-bottom:1px solid var(--line);
}
.sidebar-parent{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:14px 20px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    font-size:15px;
    color:#fff;
    background:var(--green);
    border-left:3px solid transparent;
    transition:border-color .15s, background .15s, color .15s;
}
.sidebar-parent:hover{
    background:#5a1776;
    color:#fff;
}
.sidebar-group.is-active > .sidebar-parent{
    color:#fff;
    background:var(--green);
}
.sidebar-group.is-active > .sidebar-parent:hover{ background:#5a1776; }
.parent-count{
    font-size:11px;
    font-weight:700;
    color:#fff;
    background:rgba(255,255,255,.18);
    border-radius:999px;
    padding:2px 8px;
    min-width:24px;
    text-align:center;
}

/* Children: visible by default — no click needed */
.sidebar-children{
    display:block;
    padding:4px 0 10px;
    border-top:1px solid var(--line);
    background:#fafafa;
}

.sidebar-children a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:11px 20px 11px 34px;
    color:var(--muted);
    font-size:14px;
    border-left:3px solid transparent;
    transition:border-color .15s, color .15s, background .15s;
    position:relative;
}
.sidebar-children a::before{
    content:"";
    position:absolute;
    left:22px; top:50%;
    width:5px; height:1px;
    background:#cfd5d2;
    transform:translateY(-50%);
}
.sidebar-children a:hover{
    color:var(--green);
    border-left-color:var(--green);
    background:#fff;
}
.sidebar-children a.is-current{
    color:var(--ink);
    font-weight:700;
    border-left-color:var(--green);
    background:#fff;
}
.child-count{
    font-size:11px;
    color:#98a29f;
    min-width:22px;
    text-align:right;
}
.sidebar-children a.is-current .child-count{ color:var(--green); font-weight:700; }

/* Help block becomes a CTA card matching the brand color */
.sidebar-help{
    margin-top:18px;
    padding:18px 16px 20px;
    background:var(--green);
    color:#fff;
    border-left:3px solid #fff;
}
.sidebar-help .help-eyebrow{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:#fff;
    font-weight:700;
    margin-bottom:8px;
}
.sidebar-help p{
    font-size:13px;
    color:#fff;
    line-height:1.55;
    margin:0 0 12px;
}
.sidebar-help .button{
    width:100%;
    justify-content:center;
    padding:10px 14px;
    font-size:13px;
    background:#fff;
    color:var(--green);
    border-color:#fff;
}

/* ===== Product grid ======================================== */
.jomola-archive-products ul.products{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;
    list-style:none;
    padding:0;
    margin:0;
}
.jomola-archive-products ul.products li.product{
    display:flex;
    flex-direction:column;
    border:1px solid var(--line);
    background:#fff;
    transition:border-color .2s, box-shadow .2s;
    width:auto !important;
    margin:0 !important;
    float:none !important;
    clear:none !important;
    min-width:0;
}
.jomola-archive-products ul.products li.product:hover{
    border-color:var(--green);
    box-shadow:0 8px 24px rgba(23,33,31,.08);
}
.jomola-archive-products ul.products li.product a.woocommerce-LoopProduct-link{
    display:block;
}
.jomola-archive-products ul.products li.product img{
    display:block;
    width:100% !important;
    height:auto !important;
    aspect-ratio:1 / 1;
    object-fit:contain;
    object-position:center;
    padding:18px;
    background:#fff;
}
.jomola-archive-products ul.products li.product h2.woocommerce-loop-product__title{
    font-size:18px;
    line-height:1.35;
    margin:18px 20px 10px;
    font-weight:600;
    color:var(--ink);
    padding:0;
}
.jomola-archive-products ul.products li.product .jomola-loop-quote{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:0 20px 20px;
    padding:12px 16px;
    border:none;
    background:var(--green);
    color:#fff;
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    transition:background .15s,color .15s,border-color .15s;
}
.jomola-archive-products ul.products li.product .jomola-loop-quote:hover{
    background:#5a1776;
    color:#fff;
}
.jomola-archive-products ul.products li.product .jomola-loop-quote span{font-size:16px;line-height:1}
.jomola-archive-products ul.products li.product .price{
    font-size:14px;
    color:var(--green);
    font-weight:700;
    margin:0 16px 16px;
}
.jomola-archive-products .woocommerce-result-count,
.jomola-archive-products .woocommerce-ordering{
    margin-bottom:18px;
}

/* ============================================================
   Single product layout (B2B friendly, fluid responsive)
   ============================================================ */
.jomola-single-product .woocommerce-notices-wrapper{margin-bottom:18px}
.jomola-single-product .woocommerce-breadcrumb{padding:14px 0;font-size:13px;color:var(--muted)}
.jomola-single-product .woocommerce-breadcrumb a{color:var(--green)}

/* Fluid 2-column grid that fills the available width on every screen size. */
.jomola-single-product div.product{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:clamp(20px,4vw,56px);
    align-items:start;
    width:100%;
    margin:0;
}
.jomola-single-product .woocommerce-product-gallery{
    position:sticky;
    top:98px;
    border:1px solid var(--line);
    background:#fff;
    padding:14px;
    width:100%;
    min-width:0;
}
.jomola-single-product .woocommerce-product-gallery .woocommerce-product-gallery__image{
    display:block;
    margin-bottom:10px;
    width:100%;
}
.jomola-single-product .woocommerce-product-gallery img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:contain;
    background:var(--paper);
}
.jomola-single-product .summary{width:100%;min-width:0;max-width:100%}
.jomola-single-product .summary h1.product_title{
    font-size:clamp(22px,2.6vw,34px);
    line-height:1.15;
    margin:0 0 14px;
    color:var(--ink);
}
.jomola-single-product .summary .woocommerce-product-details__short-description{
    margin:14px 0 22px;
    color:var(--muted);
    line-height:1.6;
}
.jomola-single-product .summary .price{
    display:inline-block;
    background:var(--ink);
    color:#fff;
    padding:8px 16px;
    font-weight:700;
    margin-bottom:18px;
}
.jomola-single-product .summary .cart{display:none} /* B2B: no add-to-cart */
.jomola-single-product .summary .product_meta{
    font-size:13px;
    color:var(--muted);
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid var(--line);
}
.jomola-single-product .summary .product_meta > span{display:block;margin-bottom:6px}
.jomola-single-product .summary .product_meta a{color:var(--green)}
.jomola-single-product .jomola-enquiry{margin:0 0 22px}
.jomola-single-product .jomola-enquiry .button{width:100%;justify-content:center}
.jomola-single-product .woocommerce-tabs{padding-top:24px}
.jomola-single-product .woocommerce-tabs ul.tabs{
    padding:0;
    margin:0 0 14px;
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:0;
    border-bottom:1px solid var(--line);
}
.jomola-single-product .woocommerce-tabs ul.tabs li{
    margin:0;
    border:0;
    background:none;
    border-radius:0;
}
.jomola-single-product .woocommerce-tabs ul.tabs li a{
    padding:12px 18px;
    display:block;
    font-weight:700;
    color:var(--muted);
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
}
.jomola-single-product .woocommerce-tabs ul.tabs li.active a{
    color:var(--ink);
    border-bottom-color:var(--green);
}
.jomola-single-product .woocommerce-tabs .panel{margin-bottom:24px;width:100%}
.jomola-single-product .related.products h2{font-size:24px;margin:24px 0 14px}
.jomola-single-product .related.products ul.products{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ============================================================
   Catalogue hero / breadcrumb
   ============================================================ */
.jomola-cat-hero .jomola-breadcrumb{
    margin-top:14px;
    font-size:13px;
    color:var(--muted);
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}
.jomola-cat-hero .jomola-breadcrumb a{color:var(--green)}
.jomola-cat-hero .jomola-breadcrumb .current{color:var(--ink);font-weight:700}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1100px){
    .jomola-archive-layout{grid-template-columns:260px minmax(0,1fr);gap:24px}
}
@media (max-width:960px){
    .jomola-archive-layout{grid-template-columns:220px minmax(0,1fr);gap:24px}
    .jomola-archive-products ul.products{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
    .jomola-single-product div.product{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
    .jomola-single-product .woocommerce-product-gallery{position:static}
    .jomola-single-product .related.products ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:780px){
    .jomola-archive-layout{grid-template-columns:1fr;gap:22px}
    .jomola-category-sidebar{position:static}
    .jomola-archive-products ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
    .jomola-single-product div.product{grid-template-columns:1fr;gap:22px}
    .jomola-single-product .summary h1.product_title{font-size:26px}
    .jomola-single-product .related.products ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
    .jomola-archive-products ul.products{grid-template-columns:1fr}
    .jomola-single-product .related.products ul.products{grid-template-columns:1fr}
    .jomola-single-product .woocommerce-tabs ul.tabs li a{padding:10px 12px;font-size:13px}
}