/* ============================================================
   CANNEXX CATALOGUE — cannexx-catalogue.css
   /wp-content/themes/YOUR-THEME/css/cannexx-catalogue.css
   ============================================================ */

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

.cnx-wrap {
/*     font-family: 'Segoe UI', Arial, sans-serif;
    background: #f4f6fb; */
    min-height: 80vh;Q
}

/* ── Hero ── */
.cnx-hero {
    background: #053378;
    color: #fff;
	text-align:center;
    padding: 100px 0;
    max-width: 1760px;
    margin: 0 auto;
    border-radius:10px;
}
.cnx-hero-title { margin: 0 0 10px; font-size: 40px; font-weight: 900; font-family: Georgia, serif; letter-spacing: 0.5px; }
.cnx-hero-sub { margin: 0 0 14px; font-size: 16px; opacity: 0.85; }
.cnx-hero-meta { font-size: 13px; opacity: 0.7; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.cnx-hero-meta b { color: #fff; }
.cnx-dot { opacity: 0.5; }

/* ── Layout ── */
.cnx-layout { display: flex; gap: 26px; padding: 28px 0px; max-width: 1760px; margin: 0 auto; align-items: flex-start; }

/* ── Sidebar ── */
.cnx-sidebar { width: 463px; flex-shrink: 0; position: sticky; }
.cnx-sidebar .cnx-filter-head h6{
	color:#051124;
}
.cnx-filter-box { border-radius: 14px; padding: 32px;border-radius:10px;}
.cnx-filter-head { display: flex; align-items: center; margin-bottom: 16px; gap: 8px; }
.cnx-filter-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: #051124; flex: 1; }
.cnx-clear-all { font-size: 14px; color: #2563eb; text-decoration: none; font-weight: 600; }
.cnx-clear-all:hover { text-decoration: underline; }

/* Pills */
.cnx-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.cnx-pill { display: inline-flex; align-items: center; gap: 4px; background: #e8f0fe; border: 1px solid #c7d7fc; color: #1a3a6b; border-radius: 20px; padding: 3px 9px; font-size: 11px; font-weight: 600; }
.cnx-pill-x { color: #666; text-decoration: none; font-size: 13px; line-height: 1; margin-left: 2px; }
.cnx-pill-x:hover { color: #dc2626; }

/* Filter groups */
.cnx-fg { margin-bottom: 16px; }
.cnx-fl { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; color: #666; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.4px; }
.cnx-fsel { width: 100%; padding: 20px; border: 1px solid #e0e6ef; border-radius: 8px; background: #fff url("https://cannexx.techsolutionn.com/wp-content/uploads/2026/03/drop-down.svg") no-repeat right 20px center; -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color 0.2s;color: #051124;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 140%; 
letter-spacing: -0.54px; }
.cnx-fsel:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }

/* Filter actions */
.cnx-filter-actions { display: flex; gap: 8px; margin-top: 14px; }
.cnx-btn-apply { flex: 1; padding: 12px 24px; background: #82CC7F; color: #000; border: none; border-radius: 8px; cursor: pointer; transition: background 0.2s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.cnx-btn-apply:hover { background: rgba(130, 204, 127, 0.50); color: #fff; }
.cnx-btn-reset { padding: 10px 13px; background: #f0f0f0; color: #555; border: none; border-radius: 8px; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.cnx-btn-reset:hover { background: #e0e0e0; }
.cnx-empty p{
	padding-bottom:10px;
}

/* Add CTA */
.cnx-add-cta { display: flex; align-items: center; gap: 12px; margin-top: 16px; background: #82CC7F; border-radius: 11px; padding: 14px; text-decoration: none; transition: background 0.2s;flex-wrap:wrap; }
/* .cnx-add-cta:hover { background: #d7f0d8; } */
.cnx-add-icon { font-size: 22px; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700;width:100%; }
.cnx-add-txt { display: flex; flex-direction: column;width: 100%;align-items: center; }
.cnx-add-icon img{
	height:81px;
	    border-radius: 8px;
}
.cnx-add-txt strong { color: #2e7d32; font-size: 13px; font-weight: 700; }
.cnx-add-txt small { color: #666; font-size: 11px; margin-top: 2px; }
.cnx-add-txt h6,.cnx-add-txt p{
	color:#fff;
	padding-bottom:8px;
}

/* ── Main area ── */
.cnx-main-area { flex: 1; min-width: 0; }
.cnx-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.cnx-count { margin: 0; font-size: 18px; color: #555; }
.cnx-count strong { color: #1a3a6b; }
.cnx-filtered { color: #2563eb; font-size: 13px; }

/* ── Grid ── */
.cnx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ── Card ── */
/* ── Card ──────────────────────────────────────────────── */
.cnx-product-card {
    width: auto;
    background: #fff;
	border: 1px solid #E9E9E9;
    border-radius: 10px;
    overflow: hidden;
/*     box-shadow: 0 4px 20px rgba(0,0,0,0.08); */
    display: flex;
    flex-direction: column;
	height: max-content;
    padding: 20px 12px;
}

.cnx-card-img { 
	position: relative; 
	overflow: hidden; 
	background: #dde4ef;
}
.cnx-card-img img{
	height:250px !important;
}
.cnx-card-img{
	border-radius:10px;	
}
.cnx-card-img img { 
	width: 100%;
	height: 100%; 
	object-fit: cover;
	display: block; 
	transition: transform 0.4s;
}
/* .cnx-card:hover .cnx-card-img img { transform: scale(1.05); } */
.cnx-badge { 
	position: absolute; 
	top: 10px; left: 10px; 
	background: rgba(26,58,107,0.88); 
	color: #fff; 
	border-radius: 6px; 
	padding: 3px 10px;
	font-size: 11px; 
	font-weight: 700; 
	letter-spacing: 0.3px; 
}

.cnx-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cnx-strain-title {
	color: #053378;
}

.can-card-caontent-text-badge{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
	align-self: stretch;
}
.cnx-stat-row:nth-of-type(3) {
  margin-bottom: 10px;
}

.cnx-stat-row-hr{
	height: 1px;
	align-self: stretch;
	border-radius: 5px;
	background: rgba(217, 217, 217, 0.36);	
}

.cnx-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
	align-self: stretch;
    font-size: 15px;
}

.stat-label {
	color: var(--CoolGray-90, #21272A);
	font-family: Inter;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%; /* 25.2px */
	letter-spacing: -0.54px;
}

.stat-value {
	color: var(--Primary---Catalina-Blue, #053378);
	font-family: Inter;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%; /* 27px */
	letter-spacing: -0.36px;
}

/* .stat-value.price {
    color: #000;
    font-size: 16px;
} */

.cnx-spec-row {   
	display: flex;
	padding: 6px 6px 6px 16px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	gap: 12px;
	margin-bottom: 16px;
	border-radius: 10px;
	background: rgba(36, 75, 137, 0.08);
}

.spec-pill {
	font-family: Inter;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%; /* 25.2px */
	letter-spacing: -0.54px;
	color: var(--CoolGray-90, #21272A);
}

.spec-text {
	display: flex;
	padding: 7px 13px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 10px;
	background: #FFF;

	color: var(--Primary---Catalina-Blue, #053378);
	font-family: Inter;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 150%; /* 27px */
	letter-spacing: -0.36px;
}

/* Expand Area */
.cnx-expand-area {
    margin: 0 0 16px 0;
}

.cnx-expand-btn {
	display: flex;
	justify-content:space-between;
	align-items: center;
	gap: var(--stack-compact-group-gap, 16px);
	align-self: stretch;
	cursor: pointer;
    width: 100%;
    padding: 0 !important;
	background:none !important;
	border:none !important;
}

.expand-label {
    color: #21272A;
	font-family: Inter;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%; /* 27px */
	letter-spacing: -0.36px;
}

.expand-counter {
    width: 40px;
    height: 40px;
    background: #053378;
	border:2px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
	filter: drop-shadow(2px 1px 4px rgba(0, 0, 0, 0.13));
}

.counter-inner {
color: #FFF;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 27px */
letter-spacing: -0.36px;
}

.cnx-expand-body {
    background: #F9F9F9;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 8px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #424242;
}

.detail-item:last-child {
    border-bottom: none;
}

.detail-item span:first-child {
    font-weight: 500;
}

.detail-item span:last-child {
    font-weight: 600;
}

/* Offer Button */
.cnx-offer-btn {
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 14px 0;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
/*     margin-top: auto; */
    transition: background 0.2s;
}

.cnx-offer-btn:hover {
    background: #43A047;
}

.cnx-filter-box:before{
content: "";
background: rgba(5, 51, 120, 0.06);
height: 87%;
width: 100%;
left: 0;
top: 0;
position: absolute;
border-radius: 10px;
z-index: 0;
}
.cnx-filter-box *{
position: relative;
}


/* Empty */
/* .cnx-empty { text-align: center; padding: 80px 40px; color: #888; } */
.cnx-empty {
    grid-column: 1 / -1;   /* span all columns */
    text-align: center;
    padding: 80px 40px 80px 80px;
    color: #888;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.cnx-empty-icon { font-size: 50px; margin-bottom: 16px; }
.cnx-empty h3 { color: #555; margin-bottom: 8px; }

/* Pagination */
.cnx-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 32px; flex-wrap: wrap; }
.cnx-pagination a, .cnx-pagination span { padding: 8px 13px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid #e0e6ef; color: #333; background: #fff; transition: all 0.2s; }
.cnx-pagination a:hover { background: #f0f4ff; border-color: #1a56db; color: #1a56db; }
.cnx-pagination .current { background: #1a3a6b; color: #fff; border-color: #1a3a6b; }

/* ═══════════════════════════════════════
   MODAL — Figma "Make an Offer" design
═══════════════════════════════════════ */
.cnx-modal-ov { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 99999; align-items: center; justify-content: center; padding: 20px; }
.cnx-modal-ov.active { display: flex; }

.cnx-modal-box { background: #fff; border-radius: 16px; padding:70px; width: 100%; max-width: 960px; max-height: 92vh; overflow-y: auto; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.18); animation: cnxIn 0.22s ease; }

@keyframes cnxIn {
    from { opacity: 0; transform: translateY(-16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)     scale(1); }
}

/* Close X */
.cnx-modal-close { position: absolute; top: 16px; right: 18px; background: transparent; border: none; font-size: 20px; cursor: pointer; color: #555; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.2s; line-height: 1; }
.cnx-modal-close:hover { background: #f0f0f0; }

/* Title */
h3.cnx-modal-title { font-weight: 700 !important; color: #1a3a6b; line-height:130% !important;text-align:center;margin-bottom:30px; }

/* 2-col row */
.cnx-mrow { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }

/* 3-col row: QTY | Asking | Offer */
.cnx-mrow-3 { grid-template-columns: 1fr 1fr 1fr; }

/* Field group */
.cnx-mg { display: flex; flex-direction: column; }
.cnx-mg-full { margin-bottom: 30px; }

/* Label */
.cnx-ml { font-weight: 500; color: #6D6F73; margin-bottom: 18px; }

/* Text / number input */
.cnx-minput { padding: 16px 12px;border:none; border-radius: 8px; font-size: 18px; color: #BABABA; background:#F5F5F5; transition: border-color 0.2s, box-shadow 0.2s; width: 100%;outline:none; }
.cnx-minput:focus {background: #f5f5f5 !important;border: none !important; }
.cnx-minput[readonly] { background: #F5F5F5; color: #BABABA; cursor: default; }
.cnx-minput::placeholder { color: #aab; }

/* Textarea */
.cnx-mtextarea { width: 100%; padding: 16px 12px; border: none; border-radius: 8px;font-family: 'Inter'; font-size: 18px; color: #BABABA; background: #F5F5F5; resize: vertical; min-height: 110px; transition: border-color 0.2s, box-shadow 0.2s;margin-bottom:10px; }
/* .cnx-mtextarea:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); background: #fff; } */
.cnx-mtextarea::placeholder { color: #aab; }
.cnx-modal-bd .cnx-mg input:hover,
.cnx-mtextarea:hover{
	cursor:pointer;
}
.cnx-modal-bd .cnx-mg input::focus,
.cnx-mtextarea::focus{
	outline:none !important;
	
}



/* Asking price — static grey */
.cnx-price-static { padding: 16px 12px; border: none; border-radius: 8px; font-size: 18px; font-weight: 600; color: #777;line-height:normal; background: #F5F5F5; display: flex; align-items: center; }

/* Offer price — editable blue $ */
.cnx-price-editable { display: flex;padding:16px 12px; align-items: center;border: none; border-radius: 8px; overflow: hidden; background: #f5f5f5;color:#053378;line-height:normal; }
.cnx-dollar,
.cnx-per-g{
	color:#053378;
}
/* .cnx-dollar { padding: 0 9px; font-weight: 700; color: #2563eb; background: #eff4ff; font-size: 13px; align-self: stretch; display: flex; align-items: center; border-right: 1px solid #c7d7fc; } */
/* .cnx-per-g  { padding: 0 9px; font-size: 12px; color: #888; background: #eff4ff; align-self: stretch; display: flex; align-items: center; border-left: 1px solid #c7d7fc; } */
.cnx-price-editable input { flex: 1; border: none !important; outline: none !important; background: transparent !important; padding: 0 10px !important; font-size: 18px !important; font-weight: 700; color: #053378; box-shadow: none !important; min-width: 0; }
.cnx-price-editable input::placeholder{
	color: #053378;
}

/* Submit button — full width green */
.cnx-submit-btn { width: 100%; padding: 15px 0; background: #4caf50; color: #fff; border: none; border-radius: 10px; font-size: 18px; font-weight: 400; cursor: pointer; transition: background 0.2s; display: flex; align-items: center; justify-content: center; margin-top: 4px; letter-spacing: 0.2px; }
.cnx-submit-btn:hover   { background: #388e3c; }
.cnx-submit-btn:active  { transform: scale(0.99); }
.cnx-submit-btn:disabled { background: #aaa; cursor: not-allowed; }

/* Required asterisk */
.req { color: #dc2626; font-style: normal; }

/* ── Toast ── */
.cnx-toast { position: fixed; bottom: 26px; right: 26px; background: #1a3a6b; color: #fff; padding: 13px 20px; border-radius: 11px; font-size: 14px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,0.2); z-index: 999999; opacity: 0; transform: translateY(14px); transition: opacity 0.3s, transform 0.3s; pointer-events: none; }
.cnx-toast.show  { opacity: 1; transform: translateY(0); }
.cnx-toast.error { background: #c62828; }

/* Product Availability badge colours on catalogue cards */
.cnx-avail-immediately {
    color: #16a34a; /* green */
}
.cnx-avail-monthly-basis,
.cnx-avail-monthly\ basis {
    color: #d97706; /* amber */
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .cnx-layout { flex-direction: column; padding: 18px 16px; }
    .cnx-sidebar { width: 100%; position: static; }
    .cnx-hero-title { font-size: 28px; }
/*     .cnx-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } */
}

@media (max-width: 600px) {
    .cnx-modal-box { padding: 28px 18px 24px; }
    .cnx-mrow, .cnx-mrow-3 { grid-template-columns: 1fr; }
    .cnx-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
/*     .cnx-hero { padding: 36px 20px; } */
}

@media (max-width: 420px) {
    .cnx-grid { grid-template-columns: 1fr; }
}
@media only screen and (max-width:1599px){
	.cnx-hero,.cnx-layout{
		max-width: 1280px;
	}
	.cnx-sidebar{
		width:412px;
	}
	.cnx-filter-box{
		padding:20px;
	}
	.cnx-grid{
		    grid-template-columns: repeat(2, 1fr);
	}
	.cnx-empty{
		padding:80px 40px 80px 200px;
	}
}
@media only screen and (max-width:1366px){
	.cnx-hero,.cnx-layout{
		max-width: 1121px;
	}
	.cnx-sidebar{
		width: 350px;
	}
	.cnx-ml{
		margin-bottom:15px;
	}
	    .cnx-empty {
        padding: 80px 40px 80px 150px;
    }
/* 	.cnx-product-card{
		width:362px;
	} */
	
}
@media only screen and (max-width:1199px){
	.cnx-hero,.cnx-layout{
		max-width: 940px;
	}
	.cnx-layout{
		flex-direction:column;
	}
	    .cnx-sidebar {
        width: 100%;
			position:relative;
    }
/* 	.cnx-filter-box{
		height:auto;
	} */
	#cnx-filter-form{
		display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	}
	.cnx-fg{
		width:49%;
	}
	.cnx-minput,
	.cnx-mtextarea,
	.cnx-price-static{
		font-size:17px;
	}
	.cnx-modal-box{
		padding:50px;
	}
/* 	.cnx-product-card{
		width:auto;
	} */
}
@media only screen and (max-width:1024px){
	.cnx-hero,.cnx-layout{
		max-width: 100%;
	}
	.cnx-layout{
		padding:0 30px;
	}
	.cnx-hero{
		margin:0 30px;
	}
	
	.cnx-layout{
		width:100%;
	}
	.cnx-modal-box{
		max-width:850px;
	}
}
@media only screen and (max-width:767px){
	.cnx-hero{
		margin:0 20px;
	}
	.cnx-layout{
		padding:0 20px;
	}
	.cnx-grid{
		    grid-template-columns: repeat(2, 1fr);
	}
	.cnx-fsel{
		padding:12px !important;
	}
	.cnx-mrow{
		grid-template-columns: 1fr;
		margin-bottom:25px;
	}
	.cnx-mrow-3{
		grid-template-columns: 1fr 1fr 1fr;
	}
		.cnx-mg-full {
    margin-bottom: 25px;
}
	.cnx-minput, .cnx-mtextarea, .cnx-price-static {
        font-size: 16px;
    }
	.cnx-minput, .cnx-price-static, .cnx-price-editable, .cnx-mtextarea{
		    padding: 14px 12px;
	}
	.cnx-modal-close{
		width:20px;
		height:20px;
	}
	h3.cnx-modal-title{
		margin-bottom:20px;
	}
}
@media only screen and (max-width:690px){
	     .cnx-grid {
        grid-template-columns: repeat(1, 1fr);
    }
		.cnx-main-area{
		min-width:100%;
	}
	    .cnx-card {
        width: 100% !important;
    }
	    .cnx-fg {
        width: 100%;
    }
	.cnx-mrow-3{
		grid-template-columns: 1fr;
	}
	    .cnx-modal-box {
        padding: 30px;
    }
	    .cnx-ml {
        margin-bottom: 12px;
    }
	.cnx-mrow{
		margin-bottom:20px;
		gap:20px;
	}
}
@media only screen and (max-width:480px){
	.cnx-modal-box {
        padding: 20px;
    }
	h3.cnx-modal-title{
		margin-top:30px;
	}
}
@media only screen and (max-width:375px){
	.cnx-modal-box {
        padding: 15px;
    }
}
.expand-specifications {
    margin-top:10px;
    font-size:13px;
}

.expand-specifications .spec-item {
    padding:2px 0;
    color:#444;
}