/**
 * Toolkit - Single Product CSS
 * Only styles specific to plugin features (not in child theme)
 * Includes: Gallery toggle, Reviews, Attribute groups, Accordion, Cross-sell, Brand meta
 */

/* ===========================================
   CSS VARIABLES (plugin-specific only)
   Uses theme variables where available
   =========================================== */
:root {
    /* Plugin-specific colors */
    --tk-color-primary: #000;
    --tk-color-secondary: #2673ea;
    --tk-color-accent: var(--theme-palette-color-2, #2673ea);
    --tk-color-text: #111;
    --tk-color-text-muted: #666;
    --tk-color-bg: #fff;
    --tk-color-bg-light: #f8f8f8;
    --tk-color-bg-hover: #f7f7f7;
    --tk-color-border: var(--theme-border-color, #e0e0e0);
    --tk-color-border-light: rgba(0, 0, 0, 0.1);

    /* Plugin-specific sizing */
    --tk-font-xs: 0.7rem;
    --tk-font-sm: 0.8rem;
    --tk-font-base: 0.875rem;
    --tk-font-md: 0.9375rem;
    --tk-radius-sm: 4px;
    --tk-radius-md: 6px;
    --tk-radius-lg: 8px;
    --tk-radius-full: 50px;
    --tk-transition: 0.3s ease;
}

/* ===========================================
   GALLERY TOGGLE
   =========================================== */
.ct-stacked-gallery-container {
    position: relative;
    padding-bottom: 0;
    margin-bottom: 2.5rem;
}

.ct-stacked-gallery-container .ct-media-container:nth-child(n+5) {
    display: none;
}

.see-toggle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.2rem;
    cursor: pointer;
    background: var(--tk-color-bg);
    color: var(--tk-color-primary);
    border: 2px solid var(--tk-color-primary);
    border-radius: var(--tk-radius-full);
    font-weight: 600;
    z-index: 10;
    white-space: nowrap;
    transition: background var(--tk-transition);
    font-size: var(--tk-font-md);
}

.see-toggle:hover {
    background: var(--tk-color-bg-hover);
}

#load-more-images {
    bottom: -1.5rem;
}

#load-less-images {
    display: none;
    bottom: -1.5rem;
}

.gallery-expanded .ct-media-container:nth-child(n+5) {
    display: block !important;
}

.gallery-expanded {
    margin-bottom: 2.5rem !important;
}

@media (max-width: 767px) {
    .ct-stacked-gallery-container {
        margin-bottom: 1rem;
    }
    .see-toggle {
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
    }
    #load-more-images,
    #load-less-images {
        bottom: -1rem;
    }
}

/* ===========================================
   FULL WIDTH REVIEWS
   =========================================== */
.fullwidth-wc-reviews {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    max-width: 100vw;
    padding: 40px 20px;
    box-sizing: border-box;
}

.fullwidth-wc-reviews .woocommerce-Reviews {
    max-width: none !important;
    width: 50% !important;
    margin: 0 auto;
}

@media (max-width: 1290px) {
    .fullwidth-wc-reviews .woocommerce-Reviews {
        width: 70% !important;
    }
}

@media (max-width: 720px) {
    .fullwidth-wc-reviews {
        padding: 30px 20px;
    }
    .fullwidth-wc-reviews .woocommerce-Reviews {
        width: calc(100% - 40px) !important;
        margin: 0 20px !important;
    }
}

/* ===========================================
   ACCORDION
   =========================================== */

.accordion {
  width: 100%;
}

.accordion-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.accordion-item:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  margin: 0;
  padding: 12px 0;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.9;
}

.accordion-header:hover {
  background: #ffffff;
}

.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  background: #ffffff;
  transition: grid-template-rows 0.3s ease-out;
}

.accordion-inner {
  overflow: hidden;
  padding: 0 35px;
}

.accordion-inner > *:first-child {
  margin-top: 15px;
}

.accordion-inner > *:last-child {
  margin-bottom: 15px;
}

.accordion-inner p {
  margin: 15px 0;
}

.accordion input {
  display: none !important;
}

.accordion input:checked ~ .accordion-content {
  grid-template-rows: 1fr;
}

.accordion input:checked + .accordion-header .accordion-chevron {
  transform: rotate(90deg);
}

.accordion-chevron {
  margin-left: auto;
  font-size: 18px;
  transition: transform 0.3s ease;
}

.icon-svg {
  display: inline-block;
  width: 22px;
  height: 22px;
  fill: #333333;
  flex-shrink: 0;
}

.accordion-list {
  margin: 0;
  padding-left: 20px;
  list-style-type: decimal;
}

.accordion-list li {
  margin-bottom: 10px;
  padding-left: 5px;
}

.accordeon-ligne {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}

.woocommerce-product-attributes {
  margin-bottom: 25px;
}

.shipping-logo {
  min-width: 24px;
  margin-right: 5px;
  font-size: 1em;
  line-height: 2;
}

/* ===========================================
   WC Attributes Grid
   =========================================== */

.wc-ag-group-title {
  display: block;
  margin-bottom: 1.2em;
  font-size: 1em;
  font-weight: 700;
  color: #000000;
}

.wc-ag-group:not(:first-child) {
  margin-top: 2.5em;
}

.wc-ag-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
}

.wc-ag-table li {
  display: flex;
  flex-direction: column;
  padding: 0.6em 0;
  border-bottom: 1px solid #e0e0e0;
}

.wc-ag-table li:nth-child(odd) {
  padding-right: 1.5em;
}

.wc-ag-table li:nth-child(even) {
  padding-left: 1.5em;
}

.wc-ag-table li strong {
  margin-bottom: 0.1em;
  font-size: 0.95em;
  font-weight: 600;
  color: #000000;
}

.wc-ag-table li span {
  font-size: 0.95em;
  color: #666666;
}

/* ===========================================
   CROSS-SELL SLIDER
   =========================================== */
.cross-sell-section {
    margin-top: 2rem;
}

.cross-sell-section .heading {
    font-weight: 600;
    font-size: 0.82rem;
    margin-bottom: 0.95rem;
}

.cross-sell-slider {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
}

.cross-sell-item {
    min-width: 200px;
    flex-shrink: 0;
    scroll-snap-align: start;
    background: var(--tk-color-bg-light);
    border: none;
    border-radius: var(--tk-radius-lg);
    padding: 0.65rem;
    display: flex;
    gap: 0.55rem;
    position: relative;
    width: 45%;
    box-shadow: none;
    text-decoration: none;
    color: inherit;
    transition: background var(--tk-transition);
}

.cross-sell-item img.thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--tk-radius-md);
}

.cross-sell-item .title {
    font-size: var(--tk-font-base);
    font-weight: 600;
    line-height: 1.2;
    color: var(--tk-color-text);
    display: block;
    margin-bottom: 0.25rem;
}

@media (max-width: 480px) {
    .cross-sell-item .title {
        font-size: 0.675rem;
    }
}

.cross-sell-item .price {
    color: var(--tk-color-accent);
    font-weight: 600;
    font-size: var(--tk-font-sm);
}

.cross-sell-item .add-btn {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    background: var(--tk-color-primary);
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--tk-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    z-index: 2;
}

.cross-sell-item .add-btn.loading svg {
    opacity: 0;
}

.cross-sell-item .add-btn.loading::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tk-spin 0.8s linear infinite;
}

@keyframes tk-spin {
    to {
        transform: rotate(360deg);
    }
}

.view-link {
    text-decoration: underline;
    color: var(--tk-color-secondary);
    font-size: var(--tk-font-xs);
    display: block;
}

a.added_to_cart {
    display: none !important;
}

/* ===========================================
   BRAND META
   =========================================== */
.custom-brand-style {
    background: transparent !important;
    font-weight: 500 !important;
    display: inline-block;
    margin-left: 5px;
}



/* Product Bundle - Optimized CSS v2.0 */
.gb-bundle-box{padding:15px 0;margin:20px 0}
.gb-bundle-title{font-size:16px;margin-bottom:15px;font-weight:700;color:#000}
.gb-bundle-list{display:flex;flex-direction:column;gap:10px}
.gb-row{display:flex;align-items:center;padding:12px 20px;background:#fff;border:1px solid #e0e0e0;border-radius:12px;gap:15px;position:relative}
.gb-col-check{flex-shrink:0}
.gb-col-check input{width:20px;height:20px;cursor:pointer;accent-color:#000}
.gb-col-img{flex-shrink:0}
.gb-col-img img{width:65px;height:65px;object-fit:cover;border-radius:4px;cursor:pointer;transition:opacity .2s;border:none}
.gb-col-img img:hover{opacity:.8}
.gb-col-main{flex:1;min-width:0}
.gb-name{font-size:14px;font-weight:600;color:#000;line-height:1.3;margin-bottom:8px}
.gb-meta-row{display:flex;gap:15px;align-items:center;flex-wrap:wrap}
.gb-meta-item{display:flex;align-items:center;gap:8px;font-size:11px;white-space:nowrap}
.gb-meta-item b{font-weight:500;color:#333}
.gb-meta-item select{height:20px;padding:0 18px 0 5px;font-size:11px;border:1px solid #ddd;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 5px center;background-size:8px;border-radius:4px;-webkit-appearance:none;appearance:none;cursor:pointer;min-width:70px}
.gb-meta-item select option:disabled{color:#aaa;background:#f5f5f5}
.gb-meta-item select.b-qty{min-width:45px}
.gb-meta-item select:focus{outline:none;border-color:#999}
.gb-stock-item{white-space:nowrap}
.gb-stock-info{font-size:11px;color:#e67e22;font-weight:500}
.gb-col-price{text-align:right;min-width:70px;flex-shrink:0}
.gb-col-price del{font-size:11px;color:#999;display:block}
.gb-price-row{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:2px}
.gb-disc-text{font-size:11px;color:#999;font-weight:400}
.gb-col-price ins{text-decoration:none;font-weight:700;font-size:14px;color:#000}
body.gb-lightbox-open{overflow:hidden!important}
.gb-lightbox-dialog{padding:0;border:none;background:0 0;max-width:none;max-height:none;width:100vw;height:100vh;position:fixed;top:0;left:0}
.gb-lightbox-dialog::backdrop{background:rgba(0,0,0,.6)}
.gb-lightbox-dialog[open]{display:flex;align-items:center;justify-content:center}
.gb-lightbox-container{position:relative;background:#fff;border-radius:12px;max-width:650px;width:90vw;max-height:90vh;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);display:flex;flex-direction:column}
.gb-lightbox-close{position:absolute;top:15px;right:15px;background:#fff;border:none;color:#000;cursor:pointer;padding:8px;line-height:1;z-index:10;transition:opacity .2s;border-radius:50%}
.gb-lightbox-close:hover{opacity:.6}
.gb-lightbox-close svg{display:block}
.gb-lightbox-title{font-size:18px;font-weight:600;color:#000;text-align:center;padding:20px 50px 15px;line-height:1.4}
.gb-lightbox-main{display:flex;align-items:center;justify-content:center;padding:20px 30px;background:#fff;margin:0 20px;border-radius:8px;min-height:300px}
.gb-lightbox-image{max-width:100%;max-height:45vh;object-fit:contain;opacity:0;transition:opacity .3s}
.gb-lightbox-image.loaded{opacity:1}
.gb-lightbox-thumbnails{display:flex;gap:10px;padding:20px;justify-content:center;flex-wrap:wrap;overflow-y:auto;max-height:180px}
.gb-lightbox-thumb{width:70px;height:70px;object-fit:cover;border-radius:6px;cursor:pointer;opacity:.6;transition:opacity .2s,border-color .2s;border:2px solid transparent;flex-shrink:0}
.gb-lightbox-thumb:hover{opacity:.9}
.gb-lightbox-thumb.active{opacity:1;border-color:#000}
.gb-lightbox-cta{width:calc(100% - 40px);margin:0 20px 20px;padding:16px 24px;background:#000;color:#fff;border:none;border-radius:6px;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s}
.gb-lightbox-cta:hover{background:#333}
@media(max-width:768px){
.gb-row{padding:10px 12px;gap:10px;border-radius:10px}
.gb-col-check input{width:18px;height:18px}
.gb-col-img img{width:50px;height:50px}
.gb-name{font-size:12px;margin-bottom:6px}
.gb-meta-row{gap:10px}
.gb-meta-item{gap:5px;font-size:10px}
.gb-meta-item b{font-size:10px}
.gb-meta-item select{height:18px;font-size:10px;min-width:55px;padding:0 15px 0 4px}
.gb-meta-item select.b-qty{min-width:35px}
.gb-col-price{min-width:60px}
.gb-col-price del{font-size:9px}
.gb-disc-text{font-size:9px}
.gb-col-price ins{font-size:12px}
.gb-stock-info{font-size:9px}
.gb-lightbox-container{width:95vw;max-height:95vh;border-radius:10px}
.gb-lightbox-image{max-height:35vh}
.gb-lightbox-thumb{width:50px;height:50px}
.gb-lightbox-title{font-size:15px;padding:15px 40px 10px}
.gb-lightbox-thumbnails{max-height:130px;padding:12px;gap:8px}
.gb-lightbox-cta{margin:0 12px 12px;width:calc(100% - 24px);padding:14px 20px;font-size:14px}
.gb-lightbox-close{top:10px;right:10px;padding:6px}
.gb-lightbox-close svg{width:20px;height:20px}
}
@media(max-width:480px){
.gb-row{padding:8px 10px;gap:8px}
.gb-col-img img{width:45px;height:45px}
.gb-name{font-size:11px}
.gb-meta-item select{height:16px;font-size:9px;min-width:50px}
.gb-meta-item select.b-qty{min-width:30px}
.gb-col-price ins{font-size:11px}
.gb-disc-text{font-size:8px}
}