:root {
            /* corrected secondary color requested by user */
            --primary-color: #F2B749;
            --secondary-color: #9eb25d;
            --white-color: white;
            --text-color: black;
            --button-color: #3CD0D1;
            --button-sec-color: #3597A2;
        }
        body { font-family: 'Roboto', sans-serif; margin: 0; padding: 0; background-color: var(--white-color); }
        .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
        .section { padding: 60px 0; }
        .section-light { background-color: #f8f9fa; }
        .main-title { text-align: center; font-size: 2.5rem; margin-bottom: 20px; }
        .search-wrapper { margin-bottom: 1rem; max-width: 600px; margin-left: auto; margin-right: auto; position: relative; }
        #searchInput { width: 100%; padding: 12px 40px 12px 20px; font-size: 1rem; border: 1px solid #ccc; border-radius: 25px; box-sizing: border-box; }
        #searchInput:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 8px rgba(242, 183, 73, 0.5); }
        #resetSearchBtn { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); background: transparent; border: none; font-size: 1.5rem; cursor: pointer; color: #888; display: none; padding: 0 5px; }
        .filter-wrapper { display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; flex-wrap: wrap; }
        .filter-wrapper label { cursor: pointer; font-size: 0.9rem; user-select: none; display: flex; align-items: center; gap: 5px; }
        .license-group-title { font-size: 2rem; text-align: left; margin-top: 40px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--primary-color); }
        .license-group:first-child .license-group-title { margin-top: 0; }
    .license-group-toggle { background: none; border: none; padding: 0; display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: inherit; }
    .license-group-toggle:focus { outline: 2px solid rgba(0,0,0,0.12); }
    .license-group-icon { transition: transform 0.2s ease; }
    /* Icon rotation when the toggle is collapsed (aria-expanded=false) */
    .license-group-toggle[aria-expanded="false"] .license-group-icon { transform: rotate(-90deg); }
    /* Collapse product grid when it has the collapsed class */
    .product-grid.collapsed { display: none !important; }
    .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(470px, 1fr)); gap: 30px; }
    .product-card { position: relative; background: white; border-radius: 8px; border: 3px solid transparent; box-shadow: 0 4px 8px rgba(0,0,0,0.1); display: flex; flex-direction: column; overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s; }
        .product-card.medal-gold { border-color: #FFD700; box-shadow: 0 0 12px rgba(255, 215, 0, 0.6); }
        .product-card.medal-silver { border-color: #C0C0C0; box-shadow: 0 0 12px rgba(192, 192, 192, 0.6); }
        .product-card.medal-bronze { border-color: #CD7F32; box-shadow: 0 0 12px rgba(205, 127, 50, 0.6); }
    :root { --product-image-height: 330px; }
        .product-card-image-wrapper {
            /* fixed visual height so switching carousel slides doesn't change card size */
            height: var(--product-image-height);
            background-color: var(--white-color); /* make image background white */
            overflow: hidden;
            position: relative; /* allow absolutely positioned img inside */
        }
        .product-card-image {
            /* absolutely position the image so its intrinsic dimensions can't change layout */
            position: absolute;
            inset: 0; /* top:0; right:0; bottom:0; left:0; */
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }
        .product-card-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
    .product-card-status { position: absolute; top: 12px; left: 12px; padding: 6px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: bold; color: white; }
    .status--active { background: #28a745; }
    .status--draft { background: #6c757d; }
    .status--archived { background: #343a40; }
    .status--soldout { background: #dc3545; }
    .status--unknown { background: #007bff; }
        .status--suggestion { background: #ffc107; color: #222; }
        .status--printed { background: #20c997; }
        .status--ready-to-sell { background: #17a2b8; }
        .status--rejected { background: #bd2130; }
        .status--not-available { background: #6c757d; }
        .product-card h4 { font-size: 1.5rem; margin-top: 0; margin-bottom: 15px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
        .product-card-details { list-style: none; padding: 0; margin-top: 15px; border-top: 1px solid #eee; padding-top: 15px; font-size: 0.9rem; color: #555; }
        .product-card-details li { margin-bottom: 8px; }
        .product-card-tags { margin-bottom: 15px; }
        .tag { display: inline-block; background-color: var(--primary-color); color: var(--text-color); padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.8rem; margin-right: 0.5rem; margin-bottom: 0.5rem; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
        .tag:hover { background-color: var(--button-sec-color); color: var(--white-color); }
        .feature-badge { display: inline-block; font-size: 0.8rem; font-weight: bold; color: white; padding: 4px 10px; border-radius: 5px; white-space: nowrap; }
        .feature-badge--green { background-color: #28a745; }
        .feature-badge--orange { background-color: #fd7e14; }
        .feature-badge--red { background-color: #dc3545; }
        .feature-badge--gray { background-color: #6c757d; }
        .card-buttons { margin-top: auto; display: flex; gap: 10px; padding-top: 15px; border-top: 1px solid #eee; }
        .cta-button, .edit-button { display: inline-block; padding: 10px 15px; text-decoration: none; border-radius: 5px; font-weight: bold; text-align: center; transition: background-color 0.3s ease; flex-grow: 1; }
        .cta-button { background-color: var(--button-color); color: black; border: 2px solid var(--button-sec-color); }
        .cta-button:hover { background-color: var(--button-sec-color); }
        .edit-button { background-color: #6c757d; color: white; border: 2px solid #5a6268; }
        .edit-button:hover { background-color: #5a6268; }
        .price-comparison.low { color: #28a745; font-weight: bold; }
        .price-comparison.high { color: #dc3545; font-weight: bold; }

/* Carousel integration styling for products.php to match licenses look */
.product-card-image-wrapper.carousel .nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
    z-index: 5;
    line-height: 1;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}
.product-card-image-wrapper.carousel .nav:hover { background: rgba(0, 0, 0, 0.6); }
.product-card-image-wrapper.carousel .prev { left: 10px; }
.product-card-image-wrapper.carousel .next { right: 10px; }
.carousel-dots { display:flex; gap:8px; justify-content:center; margin-top:10px; }
.carousel-dots .dot { width:10px; height:10px; border-radius:50%; border:none; background:#ddd; cursor:pointer; }
.carousel-dots .dot.active { background: var(--primary-color); }

.product-card-content .description {
    color: #555;
    margin-top: 8px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.product-card-content .description__text {
    color: inherit;
    line-height: 1.6;
    max-width: min(100%, 32ch);
}
.product-card-content .description__text.collapsible {
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.product-card-content .description__text.collapsible.collapsed {
    max-height: 12em;
}
.product-card-content .read-more-toggle {
    background: none;
    border: none;
    color: var(--button-sec-color, #3597A2);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    align-self: flex-start;
}
.product-card-content .read-more-toggle:hover,
.product-card-content .read-more-toggle:focus { text-decoration: underline; }
.product-card-content .read-more-toggle:focus {
    outline: 2px solid rgba(0, 0, 0, 0.2);
    outline-offset: 2px;
}

/* Shopping item type badge */
.shopping-badge { display:inline-block; font-size:0.8rem; font-weight:700; padding:4px 8px; border-radius:6px; margin-left:8px; vertical-align:middle; }
.shopping--single-product { background:#17a2b8; color:white; }
.shopping--ten-to-start { background:#ffc107; color:#222; }
.shopping--define-text { background:#6f42c1; color:white; }
.shopping--unknown { background:#6c757d; color:white; }
.cart-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}
.cart-table th, .cart-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #dee2e6;
    text-align: left;
}
.cart-table th {
    background-color: #f8f9fa;
    font-weight: 700;
}
.cart-table input[type="number"] {
    width: 70px;
    padding: 8px;
    font-size: 1rem;
    border-radius: 5px;
    border: 1px solid #ccc;
}
.cart-table td:nth-child(3), 
.cart-table td:nth-child(4) {
    text-align: right;
}
.cart-table th:nth-child(3),
.cart-table th:nth-child(4) {
    text-align: right;
}

.cart-total {
    text-align: right;
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

.cart-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cta-button.added {
    background-color: #28a745; /* Grön för success */
    border-color: #218838;
}

/* Checkout button for cart - now uses primary color as requested */
.checkout-button {
    background-color: var(--primary-color);
    color: black;
    border: 2px solid #d39a2f; /* slightly darker than primary for contrast */
}
.checkout-button:hover { opacity: 0.95; }

/* ----- Checkout form enhancements (cart.php) ----- */
#checkout-form { margin-bottom: 18px; }
#checkout-form label { display:block; margin-bottom: 12px; color:#333; font-weight: 500; }
#checkout-form input[type="text"],
#checkout-form input[type="email"],
#checkout-form input[type="number"] {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1.5px solid #ced4da !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: 16px;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    box-sizing: border-box;
}
#checkout-form input[type="text"]::placeholder,
#checkout-form input[type="email"]::placeholder { color:#9aa0a6; }
#checkout-form input[type="text"]:focus,
#checkout-form input[type="email"]:focus,
#checkout-form input[type="number"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(242, 183, 73, 0.15);
}
#checkout-form input.invalid,
#checkout-form input[aria-invalid="true"] {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.15) !important;
}
/* Responsive two-column row already inline in cart; ensure gap works well */
#checkout-form .grid-row { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { #checkout-form .grid-row { grid-template-columns: 1fr; } }


/* --- Mobile tweaks for product grid and images --- */
@media (max-width: 560px) {
  .product-grid { grid-template-columns: 1fr; }
  :root { --product-image-height: 230px; }
}

/* ---- Global whitespace & layout refinements ---- */
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: var(--space-16); line-height: 1.25; }
p { margin: 0 0 var(--space-12) 0; }
ul, ol { margin: 0 0 var(--space-12) 0; padding-left: 1.25rem; }

/* Vertical rhythm utility: apply consistent spacing between direct children */
.flow > * + * { margin-top: var(--space-16); }
.stack > * + * { margin-top: var(--space-12); }
.cluster { display:flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }

/* Section and container spacing tweaks */
.section { padding: var(--space-48) 0; }
.container { padding-left: var(--space-20); padding-right: var(--space-20); }
.main-title { margin-bottom: var(--space-24); text-align: center; }

/* Action rows */
.actions { display:flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-20); }
.cart-footer { gap: var(--space-12); margin-top: var(--space-16); }

/* Payment/info boxes */
.payment-info { margin-top: var(--space-16); padding: var(--space-14); background: var(--primary-color); color: black; border-left:4px solid #d39a2f; border-radius: 8px; }
.order-summary { margin-top: var(--space-16); padding: var(--space-14); background:#f8fafb; border:1px solid #eef2f4; border-radius: 10px; }

/* Tables (invoice + cart) coherence */
.invoice-table { width: 100%; border-collapse: collapse; margin-top: var(--space-12); }
.invoice-table th, .invoice-table td { padding: 10px 12px; border-bottom: 1px solid #eee; text-align: left; }
.invoice-table th { background-color: #f8f9fa; font-weight: 700; }
.invoice-total { text-align: right; margin-top: var(--space-16); font-size: 1.1rem; }

/* Make wide tables not break layout on small screens */
.table-scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroller > table { min-width: 520px; }

/* Buttons normalization */
.cta-button, .edit-button { padding: 12px 16px; border-radius: 8px; }

/* Alignment and numeric tabulation improvements for invoice tables */
.invoice-table th:nth-child(2),
.invoice-table td:nth-child(2),
.invoice-table th:nth-child(3),
.invoice-table td:nth-child(3),
.invoice-table th:nth-child(4),
.invoice-table td:nth-child(4) {
  text-align: right;
  font-variant-numeric: tabular-nums; /* ensure aligned digits */
}
/* Slightly roomier rows for readability */
.invoice-table th, .invoice-table td { padding: 12px 14px; }

/* --- Cart empty inline highlight (matches email invalid styling) --- */
#cart-root.invalid {
  border: 1.5px solid #dc3545;
  box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.15);
  border-radius: 8px;
  padding: 12px;
}

/* Products page specific background override */
.page-products .section-light { background-color: #fff; }

.product-card-image-wrapper .community-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 56px;
  height: auto;
  z-index: 6;
  pointer-events: none;
}


/* Added attribution shopping badge style */
.shopping--attribution { background:#20c997; color:white; }