/* QVC Critical CSS – Production (CSP-friendly, scoped) */

/* Typeface */
.qvc-form-container,
.qvc-loaded-product,
.qvc-load-more-wrapper { font-family: 'Hind', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* Form container */
.qvc-form-container { margin:20px 0 0 0; padding:0; border:none; background:transparent; }

/* SKU */
.qvc-sku { margin-bottom:16px; font-size:14px; color:#666; font-weight:400; }
.qvc-sku-label { font-weight:400; margin-right:5px; color:#666; }
.qvc-sku-value { color:#333; font-weight:400; }

/* Attributes */
.qvc-attribute-row { margin:16px 0; display:flex; align-items:center; gap:12px; }
.qvc-attribute-label { font-size:14px; min-width:50px; flex-shrink:0; font-weight:400; color:#333; }
.qvc-attribute-values { width:100%; }
.qvc-attribute-select { width:100%; padding:12px 16px; border:1px solid #ddd; background:#f5f5f5; font-size:14px; color:#333; cursor:pointer; padding-right:40px; }
.qvc-attribute-select:focus { border-color:#999; outline:0; background:#fff; }

/* Swatches */
.qvc-color-swatches { display:flex; gap:10px; flex-wrap:wrap; }
.qvc-color-swatch { width:30px; height:30px; border:1px solid #ddd;  border-radius: 0 !important; cursor:pointer; transition:all .2s ease; background:none; padding:0; position:relative; }
.qvc-color-swatch:hover { border-color:#999; }
.qvc-color-swatch.selected { border-color:#4FB9B0; border-width:2px; }
/* sichtbarer Tastaturfokus für Swatches */
.qvc-color-swatch:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* Fokus für Produktkarten (Bild + Name) */
.qvc-card-focus:focus {
    outline: 2px solid #000;
    outline-offset: 3px;
}

/* Quantity */
.qvc-quantity-row { margin:16px 0; display:flex; align-items:center; gap:12px; }
.qvc-quantity-label { font-size:14px; min-width:50px; flex-shrink:0; font-weight:400; color:#333; }
.qvc-quantity-controls { display:flex; width:fit-content; border:1px solid #ddd; background:#fff; }
.qvc-qty-btn { width:30px; height:30px; border:none; background:#000; color:#fff; cursor:pointer; font-size:16px; font-weight:400; display:flex; align-items:center; justify-content:center; }
.qvc-qty-btn:hover { background:#333; }
.qvc-quantity-input { width:46px; height:30px; border:none; border-left:1px solid #ddd; border-right:1px solid #ddd; text-align:center; font-size:14px; background:#fff; outline:none; color:#333; }
.qvc-quantity-input::-webkit-outer-spin-button,
.qvc-quantity-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* Submit button */
.qvc-submit-btn { width:100%; padding:16px 20px; margin-top:16px; border:none; background:#000; color:#fff; font-size:16px; font-weight:500; cursor:pointer; transition:background-color .2s; }
.qvc-submit-btn:hover:not(:disabled){ background:#333; }
.qvc-submit-btn:disabled{ background:#ccc; cursor:not-allowed; }
.qvc-submit-btn.qvc-success{ background:#4FB9B0; }
.qvc-submit-btn.qvc-error{ background:#dc3545; }

/* Product grid (scoped to container) */
#portfoliosammlung ul.products,
#portfoliosammlung .wc-block-grid__products,
#portfoliosammlung .wp-block-woocommerce-product-collection__products,
#portfoliosammlung .wc-block-product-template,
#portfoliosammlung .wc-block-product-template__responsive {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:50px; list-style:none; padding:0; margin:0;
}

ul.wc-block-product-template__responsive.columns-3 {
    display:grid !important; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)) !important; gap:50px !important; list-style:none !important; padding:0 !important; margin:0 !important;
}
ul.wc-block-product-template__responsive.columns-3 > li,
#portfoliosammlung .wc-block-product-template__responsive > li { margin:0 !important; padding:0 !important; width:auto !important; }

/* Unified layout */
.wc-block-grid__product, .qvc-loaded-product { display:flex; flex-direction:column; border:none; padding:0; background:#fff; height:100%; }
.wc-block-grid__product-image, .qvc-loaded-product .wc-block-grid__product-image, .wc-block-components-product-image { order:1; margin-bottom:12px; text-align:center; padding:0; }
.wc-block-grid__product-image img, .qvc-loaded-product img { max-width:100%; height:auto; }
.wp-block-post-title, .qvc-loaded-product h2, .qvc-loaded-product h3 { order:2; margin-bottom:12px; font-size:18px; font-weight:400; line-height:1.4; color:#333; text-align:left !important; }
.wp-block-post-title a, .qvc-loaded-product a { color:#333; text-decoration:none; }
.wp-block-post-title a:hover, .qvc-loaded-product a:hover { color:#666; }
.qvc-form-wrapper { order:3; margin-top:0; flex-grow:1; }

.wc-block-grid__product .qvc-attribute-row, .qvc-loaded-product .qvc-attribute-row { margin:12px 0; display:flex; align-items:center; gap:12px; }
.wc-block-grid__product .qvc-attribute-label, .qvc-loaded-product .qvc-attribute-label { font-size:13px; min-width:50px; }
.wc-block-grid__product .qvc-quantity-row, .qvc-loaded-product .qvc-quantity-row { margin:12px 0; display:flex; align-items:center; gap:12px; }
.wc-block-grid__product .qvc-quantity-label, .qvc-loaded-product .qvc-quantity-label { font-size:13px; min-width:50px; }
.wc-block-grid__product .qvc-attribute-select, .qvc-loaded-product .qvc-attribute-select { width:100%; padding:10px 12px; font-size:13px; padding-right:35px; }
.wc-block-grid__product .qvc-color-swatch, .qvc-loaded-product .qvc-color-swatch { width:30px; height:30px; }
.wc-block-grid__product .qvc-qty-btn, .qvc-loaded-product .qvc-qty-btn { width:30px; height:30px; font-size:16px; }
.wc-block-grid__product .qvc-quantity-input, .qvc-loaded-product .qvc-quantity-input { width:50px; height:30px; font-size:14px; }

/* PRICE HIDING (scoped – nicht global) */
#portfoliosammlung .qvc-loaded-product .price,
#portfoliosammlung .qvc-loaded-product .wc-block-grid__product-price,
#portfoliosammlung .qvc-form-container .price,
#portfoliosammlung .qvc-form-container .woocommerce-Price-amount { display:none !important; }

/* Load more */
.qvc-load-more-wrapper { text-align:center; margin:32px 0; }
.qvc-load-more-button { padding:16px 40px; border:none; background:#000; color:#fff; font-size:16px; font-weight:500; cursor:pointer; transition:background-color .2s; }
.qvc-load-more-button:hover:not(:disabled){ background:#333; }
.qvc-load-more-button:disabled{ background:#ccc; cursor:not-allowed; }

/* Responsive */
@media (max-width:768px){
    #portfoliosammlung ul.products,
    #portfoliosammlung .wc-block-grid__products,
    #portfoliosammlung .wp-block-woocommerce-product-collection__products { grid-template-columns:repeat(2,1fr); gap:20px; }
    .qvc-load-more-button { width:100%; max-width:300px; }
}
@media (max-width:480px){
    #portfoliosammlung ul.products,
    #portfoliosammlung .wc-block-grid__products,
    #portfoliosammlung .wp-block-woocommerce-product-collection__products { grid-template-columns:1fr; }
    .qvc-color-swatch { width:35px; height:35px; }
}

.screen-reader-text {
    position:absolute !important;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0);
    white-space:nowrap; border:0;
}