/* ========================================================================== * Teknodayim - WooCommerce compatibility layer * * The cart / checkout / shop / product designs belong to the td-* UI plugins * (td-cart-ui, td-checkout-access-ui, td-shop-ui, td-product-ui). This file * only contains: * 1. presentation that previously came from Envo Shop, * 2. targeted fixes for overlaps/duplicates seen on the live site. * !important is used only where a plugin rule is itself !important. * ========================================================================== */ /* -------------------------------------------------------------------------- * 1. Out-of-stock product cards ("Stok Bitti") * * Moved 1:1 from Envo Shop (td_theme_out_of_stock_card_styles). The * !important flags are kept on purpose: td-mobile-polish overrides the badge * position with its own !important rules and expects this base rule * (incl. content:"Stok Bitti") to exist. Selectors for other themes' * markup (.etheme-product-grid-item ...) were dropped - never present here. * ----------------------------------------------------------------------- */ .woocommerce ul.products li.product.outofstock, .woocommerce-page ul.products li.product.outofstock, .products .product.outofstock, .product-grid-item.outofstock, .type-product.outofstock { position: relative; } .woocommerce ul.products li.product.outofstock .content-product, .woocommerce-page ul.products li.product.outofstock .content-product, .woocommerce ul.products li.product.outofstock .product-wrapper, .woocommerce-page ul.products li.product.outofstock .product-wrapper, .products .product.outofstock .content-product, .products .product.outofstock .product-wrapper, .product-grid-item.outofstock .content-product, .product-grid-item.outofstock .product-wrapper, .type-product.outofstock .content-product, .type-product.outofstock .product-wrapper { background: linear-gradient(180deg, #fff7f7 0%, #fff1f1 100%) !important; border-color: rgba(220, 38, 38, .24) !important; box-shadow: 0 14px 30px rgba(220, 38, 38, .08) !important; } .woocommerce ul.products li.product.outofstock img, .woocommerce-page ul.products li.product.outofstock img, .products .product.outofstock img, .product-grid-item.outofstock img, .type-product.outofstock img { opacity: .76 !important; filter: saturate(.72) !important; } .woocommerce ul.products li.product.outofstock .price, .woocommerce-page ul.products li.product.outofstock .price, .products .product.outofstock .price, .product-grid-item.outofstock .price, .type-product.outofstock .price { color: #b91c1c !important; } .woocommerce ul.products li.product.outofstock .woocommerce-loop-product__title, .woocommerce-page ul.products li.product.outofstock .woocommerce-loop-product__title, .woocommerce ul.products li.product.outofstock .product-title a, .woocommerce-page ul.products li.product.outofstock .product-title a, .products .product.outofstock .woocommerce-loop-product__title, .products .product.outofstock .product-title a, .product-grid-item.outofstock .woocommerce-loop-product__title, .product-grid-item.outofstock .product-title a, .type-product.outofstock .woocommerce-loop-product__title, .type-product.outofstock .product-title a { color: #7f1d1d !important; } .woocommerce ul.products li.product.outofstock::before, .woocommerce-page ul.products li.product.outofstock::before, .products .product.outofstock::before, .product-grid-item.outofstock::before, .type-product.outofstock::before { content: "Stok Bitti"; position: absolute; top: 12px; left: 12px; z-index: 8; display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: #fee2e2; color: #b91c1c; font-size: 11px; font-weight: 1000; letter-spacing: .2px; box-shadow: 0 8px 18px rgba(220, 38, 38, .14); } .woocommerce ul.products li.product.outofstock a.add_to_cart_button, .woocommerce ul.products li.product.outofstock a.button, .woocommerce ul.products li.product.outofstock span.button, .woocommerce-page ul.products li.product.outofstock a.add_to_cart_button, .woocommerce-page ul.products li.product.outofstock a.button, .woocommerce-page ul.products li.product.outofstock span.button, .products .product.outofstock a.add_to_cart_button, .products .product.outofstock a.button, .products .product.outofstock span.button, .product-grid-item.outofstock a.add_to_cart_button, .product-grid-item.outofstock a.button, .product-grid-item.outofstock span.button, .type-product.outofstock a.add_to_cart_button, .type-product.outofstock a.button, .type-product.outofstock span.button, .td-stock-bitti-btn { background: #fee2e2 !important; color: #b91c1c !important; border: 1px solid #fecaca !important; box-shadow: none !important; cursor: not-allowed !important; pointer-events: none !important; } .single-product .stock.out-of-stock, .single-product .out-of-stock, .td-single-stock-bitti { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border: 1px solid #fecaca; border-radius: 14px; background: #fee2e2; color: #b91c1c !important; font-size: 13px; font-weight: 1000; } /* -------------------------------------------------------------------------- * 2. Single product quantity "-" / "+" buttons (markup: inc/woocommerce.php) * td-product-ui hides them on mobile, where it uses its own sticky bar. * ----------------------------------------------------------------------- */ form.cart button.minus, form.cart button.plus { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 40px; padding: 0; border: 1px solid rgba(0, 0, 0, .12); border-radius: 12px; background: #fff; color: var(--td-dark); font-size: 18px; font-weight: 900; line-height: 1; vertical-align: middle; } form.cart button.minus:hover, form.cart button.plus:hover { border-color: rgba(232, 80, 2, .3); background: var(--td-orange-soft); color: var(--td-orange); } /* -------------------------------------------------------------------------- * 3. Cart: one product image per line * * WooCommerce prints the image in the .product-thumbnail column and * td-cart-ui also injects a copy into the product name * (.td-cart-name-img via woocommerce_cart_item_name) -> two images side by * side. The thumbnail column is kept (linked, used by td-cart-ui's mobile * card layout); the injected copy is hidden. Cart data and the plugin * filter are untouched. The upsell "Ek Ürün" image (.td-upsell-cart-addon) * is a different element and stays visible. * * Scope: the whole cart page (table, td-cart-ui's mobile card layout, any * mini-cart that runs the same woocommerce_cart_item_name filter). * !important + one extra selector step: td-cart-ui prints its own rules for * these elements later in (wp_head 70, display:flex !important on * the wrap), so equal specificity would lose. * ----------------------------------------------------------------------- */ body.woocommerce-cart .td-cart-name-wrap .td-cart-name-img, body.woocommerce-cart span.td-cart-name-img { display: none !important; } /* With the copy hidden the wrap holds only the name: no gap, no empty space. */ body.woocommerce-cart span.td-cart-name-wrap { gap: 0 !important; } /* * Mobile: WooCommerce's own woocommerce-smallscreen.css hides * `table.cart .product-thumbnail` below 769px - that is why td-cart-ui * injected the copy (on mobile it was the only image). With the copy hidden, * the standard thumbnail is shown again so mobile keeps exactly one image. * td-cart-ui's <=680px card layout already places .product-thumbnail in its * left column (88px). WooCommerce rules here have no !important, except * td text-align (hence the one !important below). */ @media (max-width: 768px) { body.woocommerce-cart table.cart td.product-thumbnail { display: block; text-align: left !important; } /* WooCommerce prints `content: attr(data-title) ": "` before every * responsive cell; the image cell has no title -> stray ": ". */ body.woocommerce-cart table.cart td.product-thumbnail::before { display: none; } } /* * Mobile card layout: keep the product name clear of the absolute "x" * remove button. td-cart-ui intends `padding-right:34px` here, but its own * more specific `tr.cart_item td { padding:3px 0 !important }` resets it, so * the name ran under the button (also on the current live site). */ @media (max-width: 680px) { body.woocommerce-cart table.cart tr.cart_item td.product-name { padding-right: 34px !important; } } /* -------------------------------------------------------------------------- * 4. Cart totals: sticky offset below the real header (+ admin bar). * td-cart-ui uses a fixed top:82px, which slid under the header when the * admin bar was visible. * ----------------------------------------------------------------------- */ @media (min-width: 981px) { body.woocommerce-cart #site-content .cart-collaterals { top: calc(var(--td-header-h) + var(--td-adminbar-h) + 8px); } } /* -------------------------------------------------------------------------- * 5. Floating stock widgets (td-stok-bildirim) vs. cart/checkout columns * * On wide screens the widget column moves inwards * (right: max(14px, (100vw - 1500px)/2 + 14px)) and covered the cart totals * and checkout summary values. On cart/checkout only, desktop only, the * widget column is pinned to the right edge and the content gets a matching * right gutter. Widget visibility, counters and links are unchanged. * The plugins set .page-area padding with !important, so the gutter needs * !important too (higher specificity, padding-right only). * ----------------------------------------------------------------------- */ @media (min-width: 981px) { body.woocommerce-cart .tdsb-float, body.woocommerce-checkout .tdsb-float { right: 14px; } /* Cart content is full width at every size. */ body.woocommerce-cart #site-content .page-area { padding-right: 92px !important; } } /* Checkout content is centred with max-width 1360px (checkout.css): it only * reaches the widget column below ~1540px, so the gutter stops there. */ @media (min-width: 981px) and (max-width: 1539px) { body.woocommerce-checkout #site-content .page-area { padding-right: 92px !important; } } /* -------------------------------------------------------------------------- * 6. Single product on mobile: td-product-ui shows a fixed bottom * "Sipariş Oluştur" bar; lift the stock widget button above it so it does * not cover the order button. * ----------------------------------------------------------------------- */ @media (max-width: 760px) { body.single-product.td-product-sticky-active .tdsb-float { bottom: 84px; } } /* -------------------------------------------------------------------------- * 7. Single product order form - "Kendim için" (assets/js/product.js) * The Barkod block is hidden (and its input disabled) for "Kendim için"; * "Sipariş Notu" then takes the full row, no empty column is left behind. * ----------------------------------------------------------------------- */ #custom-product-form .td-barkod-block[hidden] { display: none !important; } #custom-product-form.td-pf-kendim .cpf-compact-fields { grid-template-columns: minmax(0, 1fr); }