/******* Do not edit this file ******* Simple Custom CSS and JS - by Silkypress.com Saved: Aug 01 2026 | 06:46:26 */ /* ===================================================== CUSTOM GUITAR ATELIER — PREMIUM PRODUCT CATALOG WooCommerce + Flatsome Custom CSS & JS settings: - Linking type: Internal - Where on page: In the element - Where in site: In Frontend only Keep this as a separate CSS snippet. It styles product cards on the Shop, product-category, product-tag, and product-search catalog pages only. ===================================================== */ body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products.row { --cga-card-walnut: #302119; --cga-card-deep: #16120f; --cga-card-gold: #c49a45; --cga-card-gold-light: #dfbd74; --cga-card-ivory: #fffdf8; --cga-card-ivory-warm: #faf3e7; --cga-card-muted: #74685f; --cga-card-sale: #9b382c; } /* Premium card surface */ body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products.row > .product-small > .col-inner { position: relative; box-sizing: border-box; height: 100%; overflow: visible; background: var(--cga-card-ivory); border: 1px solid rgba(196, 154, 69, 0.34); border-radius: 16px; box-shadow: 0 10px 26px rgba(48, 33, 25, 0.10), 0 2px 6px rgba(48, 33, 25, 0.06) !important; transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products.row > .product-small > .col-inner::before { content: ""; position: absolute; z-index: 3; top: -1px; right: -1px; left: -1px; height: 4px; pointer-events: none; background: linear-gradient( 90deg, var(--cga-card-gold), var(--cga-card-gold-light), var(--cga-card-gold) ); border-radius: 16px 16px 0 0; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products.row > .product-small > .col-inner > .product-small.box { display: flex; flex-direction: column; height: 100%; background: transparent; border-radius: 16px; } /* Product image stage */ body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .box-image { width: 100% !important; margin: 0 !important; overflow: hidden; aspect-ratio: 1 / 1; background: radial-gradient( circle at 50% 42%, #ffffff 0%, var(--cga-card-ivory) 58%, var(--cga-card-ivory-warm) 100% ); border-bottom: 1px solid rgba(196, 154, 69, 0.18); border-radius: 15px 15px 0 0; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .box-image .image-zoom, body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .box-image .image-zoom > a { display: block; width: 100%; height: 100% !important; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .box-image img { display: block; box-sizing: border-box; width: 100%; height: 100% !important; padding: 14px; object-fit: contain; object-position: center; transition: transform 0.35s ease; } /* Card content */ body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .box-text-products { display: flex; flex: 1 1 auto; flex-direction: column; padding: 18px 16px 20px !important; background: linear-gradient( 180deg, #ffffff 0%, var(--cga-card-ivory) 100% ); border-radius: 0 0 15px 15px; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .title-wrapper { display: flex; flex: 1 1 auto; flex-direction: column; } /* Category label */ body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .product-cat { display: inline-flex; align-self: center; align-items: center; justify-content: center; width: auto; min-height: 24px; margin: 0 auto 9px !important; padding: 4px 10px; color: #875a1b !important; background: rgba(223, 189, 116, 0.16); border: 1px solid rgba(196, 154, 69, 0.34); border-radius: 999px; font-size: 10.5px !important; font-weight: 800; letter-spacing: 0.11em; line-height: 1.2; opacity: 1 !important; text-align: center; } /* Product title */ body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .product-title { margin: 0 !important; padding: 0; line-height: 1.4; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .product-title a { color: var(--cga-card-walnut) !important; font-size: 15px; font-weight: 650; line-height: 1.4; overflow-wrap: break-word; text-decoration: none; transition: color 0.18s ease; } /* Ratings */ body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .star-rating { margin: 9px auto 0; color: var(--cga-card-gold); } /* Prices, including sale and variable-price states */ body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .price-wrapper { margin-top: auto; padding-top: 13px; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .price { display: flex !important; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 8px; color: var(--cga-card-walnut); font-size: 15px; font-weight: 700; line-height: 1.25; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .price del { color: var(--cga-card-muted); font-size: 13.5px; font-weight: 500; opacity: 0.78; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .price ins { color: var(--cga-card-sale); background: transparent; font-size: 16px; font-weight: 800; text-decoration: none; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .price del .amount { color: inherit; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .price ins .amount { color: inherit; } /* Add to cart / Select options / Read more buttons */ body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .add-to-cart-button { margin-top: 13px; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .add-to-cart-button .button { display: inline-flex !important; box-sizing: border-box; align-items: center; justify-content: center; min-height: 44px; margin: 0 !important; padding: 0 20px !important; white-space: normal; color: #1b1209 !important; background: linear-gradient( 135deg, var(--cga-card-gold-light), var(--cga-card-gold) ) !important; border: 1px solid #a97931 !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48), 0 7px 16px rgba(48, 33, 25, 0.16); font-size: 12px !important; font-weight: 800; letter-spacing: 0.065em; line-height: 1.2 !important; text-align: center; text-shadow: none; transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .add-to-cart-button .button.loading { cursor: wait; opacity: 0.72; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .add-to-cart-button .button.added { border-color: var(--cga-card-gold) !important; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .added_to_cart { display: inline-flex; align-items: center; justify-content: center; margin-top: 9px; color: var(--cga-card-walnut) !important; font-size: 12px; font-weight: 800; text-decoration: underline; text-decoration-color: rgba(196, 154, 69, 0.65); text-underline-offset: 3px; } /* Sale and stock labels */ body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .badge-inner { color: #1b1209 !important; background: linear-gradient( 135deg, var(--cga-card-gold-light), var(--cga-card-gold) ) !important; border: 1px solid #a97931; box-shadow: 0 6px 16px rgba(48, 33, 25, 0.18); font-weight: 800; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .out-of-stock-label { padding: 9px 12px; color: var(--cga-card-gold-light); background: rgba(22, 18, 15, 0.92); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } /* Keyboard accessibility */ body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products.row > .product-small > .col-inner:focus-within { border-color: var(--cga-card-gold); box-shadow: 0 0 0 3px rgba(223, 189, 116, 0.24), 0 12px 28px rgba(48, 33, 25, 0.14) !important; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .product-title a:focus-visible, body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .add-to-cart-button .button:focus-visible, body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .added_to_cart:focus-visible, body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .image-tools a:focus-visible { outline: 3px solid var(--cga-card-gold-light); outline-offset: 3px; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .box-image .image-zoom > a:focus-visible { outline: 3px solid var(--cga-card-gold); outline-offset: -5px; } /* Hover effects only on devices that truly support hover */ @media (hover: hover) and (pointer: fine) { body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products.row > .product-small > .col-inner:hover { border-color: rgba(196, 154, 69, 0.74); box-shadow: 0 18px 38px rgba(48, 33, 25, 0.17), 0 5px 12px rgba(48, 33, 25, 0.08) !important; transform: translateY(-5px); } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .col-inner:hover .box-image img { transform: scale(1.035); } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .product-title a:hover { color: #8a5b1a !important; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .add-to-cart-button .button:hover { color: var(--cga-card-gold-light) !important; background: linear-gradient( 135deg, var(--cga-card-walnut), var(--cga-card-deep) ) !important; border-color: var(--cga-card-gold) !important; box-shadow: 0 10px 22px rgba(22, 18, 15, 0.25); transform: translateY(-2px); } } /* Tablet and mobile */ @media (max-width: 849px) { body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products.row > .product-small > .col-inner, body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products.row > .product-small > .col-inner > .product-small.box { border-radius: 14px; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products.row > .product-small > .col-inner::before { border-radius: 14px 14px 0 0; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .box-image { border-radius: 13px 13px 0 0; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .box-image img { padding: 10px; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .box-text-products { padding: 15px 12px 17px !important; border-radius: 0 0 13px 13px; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .product-title a { font-size: 13.8px; line-height: 1.38; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .price-wrapper { padding-top: 11px; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .add-to-cart-button { margin-top: 11px; } } @media (max-width: 549px) { body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .box-image img { padding: 8px; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .box-text-products { padding: 13px 10px 15px !important; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .product-cat { min-height: 22px; margin-bottom: 7px !important; padding: 3px 8px; font-size: 9.5px !important; letter-spacing: 0.085em; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .product-title a { font-size: 13px; line-height: 1.35; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .price { gap: 3px 6px; font-size: 13.5px; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .price del { font-size: 12px; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .price ins { font-size: 14.5px; } body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .add-to-cart-button .button { width: 100%; min-height: 44px; padding: 7px 10px !important; font-size: 11px !important; letter-spacing: 0.045em; } } /* Accessibility: respect reduced-motion settings */ @media (prefers-reduced-motion: reduce) { body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .col-inner, body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .box-image img, body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .product-title a, body:is( .woocommerce-shop, .post-type-archive-product, .tax-product_cat, .tax-product_tag ) #main .products .product-small .add-to-cart-button .button { transition: none !important; } }