/** * WooCommerce — thin compatibility layer after theme dist. * Premium layout lives in src/styles/blocks/_woocommerce-*.scss (Vite build). */ /* ——— Forms & buttons: touch-friendly baseline ——— */ .whoop-wc-wrap .woocommerce .button, .whoop-wc-wrap .woocommerce button.button, .whoop-wc-wrap .woocommerce a.button, .whoop-wc-wrap .woocommerce input[type="submit"].button { min-height: 44px; padding: 0.65rem 1.1rem; } .whoop-wc-page-inner .wc-block-components-text-input input, .whoop-wc-page-inner .input-text, .whoop-wc-wrap .woocommerce .input-text { min-height: 44px; font-size: 1rem; } .whoop-wc-wrap .woocommerce-notices-wrapper, .whoop-wc-page-inner .woocommerce-notices-wrapper { margin-bottom: 1rem; } /* ——— Table horizontal scroll (My Account orders; Lenis nested) ——— */ .whoop-wc-table-x { display: block; width: 100%; max-width: 100%; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x pan-y pinch-zoom; scrollbar-width: thin; } .whoop-wc-table-x table.shop_table { display: table; width: 100%; min-width: 520px; } /* ——— Token overrides (account + block edge cases) ——— */ body.woocommerce-cart .wc-block-components-sidebar-layout, body.woocommerce-checkout .wc-block-components-sidebar-layout, body.woocommerce-page .wc-block-components-sidebar-layout, body.whoop-account-page .woocommerce-MyAccount-navigation, body.whoop-account-page .woocommerce-MyAccount-content { color: var(--text, #000); } .whoop-wc-wrap .woocommerce, .whoop-wc-page-inner, body.whoop-account-page .woocommerce { color: var(--text, #000); } .whoop-wc-page-inner a:not(.wc-block-components-button):not(.button), .whoop-wc-wrap .woocommerce a:not(.button):not(.wc-block-components-button), body.whoop-account-page .woocommerce a:not(.button) { color: var(--primary, #2fa3f2); } .whoop-wc-page-inner a:not(.wc-block-components-button):not(.button):hover, .whoop-wc-wrap .woocommerce a:not(.button):not(.wc-block-components-button):hover, body.whoop-account-page .woocommerce a:not(.button):hover { color: var(--primary-hover, #b810ae); } .whoop-wc-page-inner .wc-block-components-text-input input, .whoop-wc-page-inner .wc-block-components-text-input textarea, .whoop-wc-wrap .woocommerce input.input-text, .whoop-wc-wrap .woocommerce textarea, .whoop-wc-wrap .woocommerce select, body.whoop-account-page .woocommerce input.input-text { color: var(--text, #000); background-color: var(--bg, #fff); border-color: var(--line-strong, rgba(0, 0, 0, 0.16)); } .whoop-wc-page-inner .wc-block-components-label, .whoop-wc-surface .wc-block-components-label { color: var(--text-muted, rgba(0, 0, 0, 0.62)); } .whoop-wc-page-inner .wc-block-components-text-input input, .whoop-wc-page-inner .wc-block-components-text-input textarea { width: 100%; min-width: 0; box-sizing: border-box; } .whoop-wc-page-inner.whoop-wc-surface { width: 100%; max-width: 100%; padding: 0; margin: 0; } body.woocommerce-page .page-article .entry-content, .whoop-wc-surface .entry-content { width: 100%; max-width: 100%; } /* ——— Header cart badge ——— */ .whoop-header-cart .whoop-cart-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; } .whoop-header-cart .whoop-cart-count-badge { position: absolute; top: -6px; right: -8px; min-width: 1.1rem; height: 1.1rem; padding: 0 4px; border-radius: 999px; background: var(--primary, #2fa3f2); color: #fff; font-size: 10px; font-weight: 700; line-height: 1.1rem; text-align: center; display: inline-block; } .whoop-header-cart .whoop-cart-count-badge:empty { display: none; } /* ——— Cart + checkout block polish (solid surfaces; no gradients) ——— */ body.woocommerce-cart, body.woocommerce-checkout { background: var(--bg); color: var(--text); } body.woocommerce-cart .page-article, body.woocommerce-checkout .page-article { width: min(var(--container, 1440px), calc(100% - (var(--gutter, 32px) * 2))); margin: 0 auto; padding-top: calc(var(--header-h, 109px) + 24px); padding-bottom: clamp(32px, 6vw, 72px); } body.woocommerce-cart .wc-block-cart, body.woocommerce-checkout .wc-block-checkout { width: 100%; max-width: 100%; } body.woocommerce-cart .wc-block-components-sidebar-layout, body.woocommerce-checkout .wc-block-components-sidebar-layout { gap: clamp(18px, 2.4vw, 32px); align-items: start; } body.woocommerce-cart .wc-block-cart__main, body.woocommerce-cart .wc-block-cart__sidebar, body.woocommerce-checkout .wc-block-checkout__main, body.woocommerce-checkout .wc-block-checkout__sidebar, body.woocommerce-cart .wc-block-components-main, body.woocommerce-cart .wc-block-components-sidebar, body.woocommerce-checkout .wc-block-components-main, body.woocommerce-checkout .wc-block-components-sidebar { min-width: 0; max-width: 100%; overflow-wrap: anywhere; } body.woocommerce-cart :where( .wc-block-cart-items, .wc-block-cart__submit, .wc-block-components-totals-wrapper, .wc-block-components-order-summary, .wc-block-components-order-summary__content, .wc-block-components-checkout-step, .wc-block-components-checkout-return-to-cart-button, .wc-block-components-totals-coupon, .wc-block-components-address-card, .wc-block-components-shipping-rates-control, .wc-block-components-radio-control__option, .wc-block-components-validation-error, .wc-block-components-notice-banner ), body.woocommerce-checkout :where( .wc-block-cart-items, .wc-block-cart__submit, .wc-block-components-totals-wrapper, .wc-block-components-order-summary, .wc-block-components-order-summary__content, .wc-block-components-checkout-step, .wc-block-components-checkout-return-to-cart-button, .wc-block-components-totals-coupon, .wc-block-components-address-card, .wc-block-components-shipping-rates-control, .wc-block-components-radio-control__option, .wc-block-components-validation-error, .wc-block-components-notice-banner ) { background: #fff; border: 1px solid var(--line-strong, rgba(0, 0, 0, 0.16)); border-radius: 24px; box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08); } body.woocommerce-cart .wc-block-cart__main, body.woocommerce-checkout .wc-block-checkout__main, body.woocommerce-cart .wc-block-components-main, body.woocommerce-checkout .wc-block-components-main { display: grid; gap: 18px; } body.woocommerce-cart .wc-block-cart__sidebar, body.woocommerce-checkout .wc-block-checkout__sidebar, body.woocommerce-cart .wc-block-components-sidebar, body.woocommerce-checkout .wc-block-components-sidebar { position: sticky; top: calc(var(--header-h, 109px) + 20px); display: grid; gap: 16px; padding: clamp(18px, 2vw, 28px); background: var(--bg-elev-1, #f4f5f9); border: 1px solid var(--line-strong, rgba(0, 0, 0, 0.16)); border-radius: 28px; box-shadow: 0 22px 56px rgba(15, 23, 42, 0.1); } body.woocommerce-cart .wc-block-cart-items, body.woocommerce-checkout .wc-block-components-checkout-step { padding: clamp(18px, 2.4vw, 28px); } body.woocommerce-cart .wc-block-components-product-name, body.woocommerce-checkout .wc-block-components-product-name, body.woocommerce-cart .wc-block-components-totals-item__label, body.woocommerce-checkout .wc-block-components-totals-item__label, body.woocommerce-cart .wc-block-components-checkout-step__heading h2, body.woocommerce-checkout .wc-block-components-checkout-step__heading h2 { color: var(--text); font-weight: 800; letter-spacing: -0.02em; } body.woocommerce-cart .wc-block-components-product-metadata, body.woocommerce-checkout .wc-block-components-product-metadata, body.woocommerce-cart .wc-block-components-totals-item__value, body.woocommerce-checkout .wc-block-components-totals-item__value, body.woocommerce-cart .wc-block-components-checkout-step__description, body.woocommerce-checkout .wc-block-components-checkout-step__description { color: var(--text-muted, rgba(0, 0, 0, 0.62)); } body.woocommerce-cart .wc-block-components-product-details, body.woocommerce-checkout .wc-block-components-product-details { min-width: 0; } body.woocommerce-cart .wc-block-cart-item__image img, body.woocommerce-checkout .wc-block-components-order-summary-item__image img { border-radius: 18px; background: var(--bg-elev-1, #f4f5f9); } body.woocommerce-cart .wc-block-components-quantity-selector, body.woocommerce-checkout .wc-block-components-quantity-selector { border: 1px solid var(--line-strong, rgba(0, 0, 0, 0.16)); border-radius: 999px; background: #fff; min-height: 46px; } body.woocommerce-cart .wc-block-components-quantity-selector input, body.woocommerce-checkout .wc-block-components-quantity-selector input { font-weight: 700; } body.woocommerce-cart .wc-block-components-text-input input, body.woocommerce-cart .wc-block-components-text-input select, body.woocommerce-cart .wc-block-components-text-input textarea, body.woocommerce-checkout .wc-block-components-text-input input, body.woocommerce-checkout .wc-block-components-text-input select, body.woocommerce-checkout .wc-block-components-text-input textarea { min-height: 54px; border: 1px solid var(--line-strong, rgba(0, 0, 0, 0.16)); border-radius: 18px; background: #fff; box-shadow: none; color: var(--text); font-size: 16px; } body.woocommerce-cart .wc-block-components-text-input textarea, body.woocommerce-checkout .wc-block-components-text-input textarea { min-height: 120px; padding-top: 16px; } body.woocommerce-cart .wc-block-components-text-input.is-active input, body.woocommerce-cart .wc-block-components-text-input.is-active textarea, body.woocommerce-checkout .wc-block-components-text-input.is-active input, body.woocommerce-checkout .wc-block-components-text-input.is-active textarea { border-color: var(--primary, #2fa3f2); box-shadow: 0 0 0 4px rgba(47, 163, 242, 0.14); } body.woocommerce-cart .wc-block-components-totals-coupon, body.woocommerce-checkout .wc-block-components-totals-coupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px; } body.woocommerce-cart .wc-block-components-radio-control__option, body.woocommerce-checkout .wc-block-components-radio-control__option { padding: 14px 16px; } body.woocommerce-cart .wc-block-components-radio-control__option:hover, body.woocommerce-checkout .wc-block-components-radio-control__option:hover, body.woocommerce-cart .wc-block-components-radio-control__input:checked + .wc-block-components-radio-control__option, body.woocommerce-checkout .wc-block-components-radio-control__input:checked + .wc-block-components-radio-control__option { border-color: var(--primary, #2fa3f2); box-shadow: 0 0 0 4px rgba(47, 163, 242, 0.1); } body.woocommerce-checkout .wc-block-components-checkout-step--payment-method, body.woocommerce-checkout .wc-block-components-checkout-step--shipping-method { background: #fff; } body.woocommerce-checkout .wc-block-components-payment-method-icons, body.woocommerce-checkout .wc-block-components-payment-method-label { flex-wrap: wrap; row-gap: 8px; } body.woocommerce-cart .wc-block-components-button, body.woocommerce-checkout .wc-block-components-button { min-height: 56px; border: 1px solid transparent; border-radius: 18px; background: var(--primary, #2fa3f2); color: #fff; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } body.woocommerce-cart .wc-block-components-button:hover, body.woocommerce-checkout .wc-block-components-button:hover { background: var(--primary-hover, #b810ae); box-shadow: none; transform: none; } body.woocommerce-cart .wc-block-components-button.wc-block-components-button--text, body.woocommerce-checkout .wc-block-components-button.wc-block-components-button--text, body.woocommerce-cart .wc-block-components-checkout-return-to-cart-button, body.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button { background: transparent; color: var(--text); border-color: var(--line-strong, rgba(0, 0, 0, 0.16)); } body.woocommerce-cart .wc-block-components-button.wc-block-components-button--text:hover, body.woocommerce-checkout .wc-block-components-button.wc-block-components-button--text:hover, body.woocommerce-cart .wc-block-components-checkout-return-to-cart-button:hover, body.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button:hover { background: var(--bg-elev-1, #f4f5f9); color: var(--text); } body.woocommerce-cart .wc-block-cart-item__prices, body.woocommerce-checkout .wc-block-components-order-summary-item__total-price { font-weight: 800; color: var(--text); } body.woocommerce-cart .wc-block-components-totals-footer-item, body.woocommerce-checkout .wc-block-components-totals-footer-item { padding-top: 18px; margin-top: 4px; border-top: 1px solid var(--line-strong, rgba(0, 0, 0, 0.16)); font-size: 1.15rem; font-weight: 800; color: var(--text); } body.woocommerce-cart .wc-block-components-validation-error, body.woocommerce-checkout .wc-block-components-validation-error, body.woocommerce-cart .wc-block-components-notice-banner, body.woocommerce-checkout .wc-block-components-notice-banner { padding: 16px 18px; } body.woocommerce-cart iframe, body.woocommerce-checkout iframe, body.woocommerce-cart .wc-block-components-formatted-money-amount, body.woocommerce-checkout .wc-block-components-formatted-money-amount, body.woocommerce-cart .wc-block-components-text-input, body.woocommerce-checkout .wc-block-components-text-input { max-width: 100%; } @media (max-width: 1100px) { body.woocommerce-cart .page-article, body.woocommerce-checkout .page-article { width: min(100%, calc(100% - 28px)); } body.woocommerce-cart .wc-block-components-sidebar-layout, body.woocommerce-checkout .wc-block-components-sidebar-layout { grid-template-columns: minmax(0, 1fr); } body.woocommerce-cart .wc-block-cart__sidebar, body.woocommerce-checkout .wc-block-checkout__sidebar, body.woocommerce-cart .wc-block-components-sidebar, body.woocommerce-checkout .wc-block-components-sidebar { position: static; order: -1; } } @media (max-width: 782px) { body.woocommerce-cart .page-article, body.woocommerce-checkout .page-article { width: min(100%, calc(100% - 20px)); padding-bottom: 104px; } body.woocommerce-cart .wc-block-cart-items, body.woocommerce-cart .wc-block-cart__sidebar, body.woocommerce-checkout .wc-block-checkout__main, body.woocommerce-checkout .wc-block-checkout__sidebar, body.woocommerce-cart .wc-block-components-main, body.woocommerce-cart .wc-block-components-sidebar, body.woocommerce-checkout .wc-block-components-main, body.woocommerce-checkout .wc-block-components-sidebar { padding: 18px 16px; border-radius: 22px; } body.woocommerce-cart .wc-block-cart-items__row, body.woocommerce-checkout .wc-block-components-order-summary-item { grid-template-columns: 88px minmax(0, 1fr); column-gap: 14px; } body.woocommerce-cart .wc-block-components-totals-coupon, body.woocommerce-checkout .wc-block-components-totals-coupon { grid-template-columns: 1fr; } body.woocommerce-cart .wc-block-components-totals-coupon .wc-block-components-button, body.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-button, body.woocommerce-checkout .wc-block-components-checkout-place-order-button, body.woocommerce-cart .wc-block-cart__submit-button { width: 100%; } } @media (max-width: 600px) { body.woocommerce-cart .page-article, body.woocommerce-checkout .page-article { width: min(100%, calc(100% - 16px)); padding-top: calc(var(--header-h, 109px) + 16px); } body.woocommerce-cart .wc-block-cart-item__wrap, body.woocommerce-checkout .wc-block-components-order-summary-item { min-width: 0; } body.woocommerce-cart .wc-block-components-product-name, body.woocommerce-checkout .wc-block-components-product-name { font-size: 0.98rem; } body.woocommerce-cart .wc-block-components-quantity-selector, body.woocommerce-checkout .wc-block-components-quantity-selector, body.woocommerce-cart .wc-block-components-button, body.woocommerce-checkout .wc-block-components-button { width: 100%; } } /* ——— Single product reset + layout polish ——— */ body.single-product { background: #fff; color: var(--text, #000); } body.single-product .page-article { width: min(var(--container, 1440px), calc(100% - (var(--gutter, 32px) * 2))) !important; margin: 0 auto !important; padding-top: var(--header-h, 109px) !important; padding-bottom: clamp(40px, 6vw, 88px) !important; } body.single-product .woocommerce-breadcrumb { display: none; } body.single-product .woocommerce-notices-wrapper { margin: 0 !important; padding: 0 !important; } body.single-product .woocommerce-notices-wrapper:not(:empty) { margin-bottom: 8px !important; } body.single-product div.product .whoop-product-hero { display: block !important; margin-bottom: clamp(28px, 4vw, 52px) !important; margin-top: 0 !important; padding-top: 0 !important; } body.single-product div.product .whoop-product-panel, body.single-product div.product .whoop-product-details { background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 28px; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.04); } body.single-product div.product .whoop-product-panel { border-radius: 30px !important; overflow: visible !important; background: #fff !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; } body.single-product div.product .whoop-product-panel > .tier-shell { border-radius: 30px !important; overflow: visible !important; } body.single-product div.product .tier-shell, body.single-product div.product .whoop-product-panel-shell { display: grid !important; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr) !important; align-items: stretch !important; gap: 0 !important; background: #fff !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } body.single-product div.product .tier-media, body.single-product div.product .whoop-product-panel-media { display: flex !important; align-items: stretch !important; justify-content: stretch !important; padding: 0 !important; background: #f6f8fc !important; border-right: 1px solid rgba(15, 23, 42, 0.08) !important; min-width: 0 !important; min-height: auto !important; flex-direction: row !important; } body.single-product div.product .whoop-product-panel-body, body.single-product div.product .summary.entry-summary, body.single-product div.product .summary.entry-summary.whoop-product-summary-card, body.single-product div.product div.summary, body.single-product div.product .summary, body.single-product div.product .tier-body, body.single-product div.product .tier-body.whoop-product-panel-body { float: none !important; width: 100% !important; max-width: none !important; clear: none !important; margin: 0 !important; padding: 12px 22px 12px !important; align-self: stretch !important; } body.single-product div.product .images, body.single-product div.product .woocommerce-product-gallery, body.single-product div.product .woocommerce-product-gallery__wrapper { float: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; } body.single-product div.product .woocommerce-product-gallery__wrapper { min-height: 100% !important; } body.single-product div.product .whoop-product-panel-visual, body.single-product div.product .whoop-product-panel-visual--custom { display: flex !important; width: 100% !important; min-height: 100% !important; } body.single-product div.product .whoop-product-panel-visual img, body.single-product div.product .whoop-product-panel-visual--custom img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; } body.single-product div.product .woocommerce-product-gallery { display: flex !important; align-items: stretch !important; justify-content: stretch !important; padding: 0 !important; min-height: 100% !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; width: 100% !important; overflow: hidden !important; } body.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper { position: relative !important; top: auto !important; left: auto !important; opacity: 1 !important; width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none !important; border-width: 0 !important; } body.single-product div.product .woocommerce-product-gallery__wrapper { width: 100% !important; border-radius: 0 !important; overflow: hidden !important; background: transparent !important; } body.single-product div.product .woocommerce-product-gallery__image { border-radius: 0 !important; overflow: hidden !important; background: transparent !important; height: 100% !important; display: flex !important; } body.single-product div.product .woocommerce-product-gallery__image img { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: contain !important; } body.single-product div.product .woocommerce-product-gallery .flex-control-thumbs { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)) !important; gap: 12px !important; margin-top: 16px !important; } body.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li { border: 1px solid rgba(15, 23, 42, 0.1) !important; border-radius: 16px !important; overflow: hidden !important; background: #fff !important; } body.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger, body.single-product div.product span.onsale { display: none !important; } body.single-product div.product .whoop-product-summary-card { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: auto auto auto auto auto auto !important; grid-template-areas: "certs bundles" "title bundles" "features bundles" "price bundles" "actions actions" ". ." !important; column-gap: 18px !important; row-gap: 0 !important; align-content: start !important; align-items: start !important; padding: 0 !important; margin: 0 !important; position: relative !important; min-height: auto !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important; } body.single-product div.product .whoop-product-summary-card > .whoop-product-panel-certs { grid-area: certs !important; } body.single-product div.product .whoop-product-summary-card > .product_title { grid-area: title !important; } body.single-product div.product .whoop-product-summary-card > .whoop-product-panel-features { grid-area: features !important; } body.single-product div.product .whoop-product-summary-card > .price { grid-area: price !important; } body.single-product div.product .whoop-product-summary-card > .woocommerce-product-details__short-description { display: none !important; } body.single-product div.product .whoop-product-summary-card > .whoop-product-panel-actions { grid-area: actions !important; } body.single-product div.product .whoop-product-summary-card > .whoop-product-bundle-offers { grid-area: bundles !important; align-self: start !important; margin-top: 0 !important; } body.single-product div.product .product_title { margin: 0 0 6px; font-size: clamp(1.85rem, 1.6vw, 2.3rem); line-height: 1; letter-spacing: -0.05em; font-weight: 800; color: #261246; max-width: none; white-space: normal; text-wrap: balance; } body.single-product div.product .whoop-product-panel-certs { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 0 4px; align-self: flex-start; } body.single-product div.product .whoop-product-panel-certs .tier-cert { width: 46px; height: 46px; padding: 4px; border: 1px solid rgba(47, 163, 242, 0.18); border-radius: 12px; background: #fff; flex: 0 0 46px; } body.single-product div.product .whoop-product-panel-certs img { width: 100%; height: 100%; object-fit: contain; } body.single-product div.product .whoop-product-panel-features { display: grid; gap: 4px; margin: 0 0 6px; padding: 0; color: #5b4f84; max-width: 100%; width: 100%; } body.single-product div.product .whoop-product-panel-features li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 0.89rem; line-height: 1.18; max-width: none; } body.single-product div.product .whoop-product-panel-features svg { margin-top: 4px; color: var(--primary, #2fa3f2); } body.single-product div.product .price { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 12px; margin: 0 0 6px; font-size: clamp(1.08rem, 1vw, 1.34rem); font-weight: 800; color: #261246; white-space: nowrap; } body.single-product div.product .price del { color: #b8bec8; font-size: 0.74em; } body.single-product div.product .price ins { color: #261246; text-decoration: none; } body.single-product div.product .summary p { color: rgba(15, 23, 42, 0.72); } body.single-product div.product .woocommerce-product-details__short-description { display: none; } body.single-product div.product .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; } body.single-product div.product .summary .cart { display: grid !important; grid-template-columns: 1fr !important; gap: 6px !important; align-items: stretch !important; margin: 0 0 6px !important; } body.single-product div.product form.cart { display: grid !important; grid-template-columns: 1fr !important; grid-template-areas: "quantity" "button" !important; gap: 6px !important; align-items: start !important; justify-items: start !important; width: 100% !important; } body.single-product div.product .summary .quantity { margin: 0; } body.single-product div.product form.cart .quantity, body.single-product div.product .summary .quantity { display: inline-flex !important; flex-direction: row !important; align-items: center; justify-content: flex-start; gap: 10px; min-height: 44px; padding: 0; border: 0; border-radius: 0; overflow: visible; background: transparent; flex-wrap: nowrap !important; width: auto !important; grid-area: quantity; } body.single-product div.product form.cart .quantity.whoop-qty-inline { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; } body.single-product div.product .summary .quantity .qty { width: 72px; min-height: 44px; border: 1px solid rgba(15, 23, 42, 0.14); border-radius: 16px; background: #fff; padding: 0; font-weight: 700; text-align: center; appearance: textfield; -moz-appearance: textfield; } body.single-product div.product .summary .quantity .qty::-webkit-outer-spin-button, body.single-product div.product .summary .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } body.single-product div.product .whoop-qty-step { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 999px; background: #f6f8fc; color: #22123f; font-size: 18px; font-weight: 500; line-height: 1; padding: 0; flex: 0 0 44px; order: 0; } body.single-product div.product .single_add_to_cart_button.button { width: 100% !important; min-width: 0 !important; min-height: 46px !important; border: 0 !important; border-radius: 16px !important; background: #261246 !important; box-shadow: none !important; color: #fff !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; grid-area: button !important; transition: all 0.2s ease !important; } body.single-product div.product .single_add_to_cart_button.button:hover { background: #2FA3F2 !important; box-shadow: 0 4px 16px rgba(47, 163, 242, 0.3) !important; transform: translateY(-1px) !important; } body.single-product div.product .whoop-product-panel-actions { display: flex !important; flex-direction: column !important; gap: 4px !important; } body.single-product div.product .whoop-product-bundle-offers { display: grid; gap: 6px; margin-top: 0; } body.single-product div.product .whoop-product-bundle-offers__heading { margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; color: #261246; } body.single-product div.product .whoop-product-bundle-offers__grid { display: grid; grid-template-columns: 1fr; gap: 6px; } body.single-product div.product .whoop-product-bundle-offer { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px; padding: 6px 8px; border-radius: 10px; background: linear-gradient(180deg, rgba(47, 163, 242, 0.08), rgba(38, 18, 70, 0.06)); border: 1px solid rgba(47, 163, 242, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); } body.single-product div.product .whoop-product-bundle-offer__visual { display: flex; align-items: center; gap: 8px; min-width: 0; } body.single-product div.product .whoop-product-bundle-offer__visual img { width: 34px; height: 34px; object-fit: contain; } body.single-product div.product .whoop-product-bundle-offer__quantity { font-size: clamp(1.1rem, 1.4vw, 1.5rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.06em; color: #261246; } body.single-product div.product .whoop-product-bundle-offer__body { min-width: 0; } body.single-product div.product .whoop-product-bundle-offer__title { margin: 0; font-size: 0.72rem; font-weight: 800; line-height: 1.02; color: #261246; } body.single-product div.product .whoop-product-bundle-offer__badge { display: inline-flex; align-items: center; min-height: 18px; padding: 0 6px; margin-top: 2px; border-radius: 999px; background: #2FA3F2; color: #fff; font-size: 0.62rem; font-weight: 800; } body.single-product div.product .whoop-product-bundle-offer__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin-top: 3px; } body.single-product div.product .whoop-product-bundle-offer__price { font-size: 0.9rem; font-weight: 800; color: #261246; } body.single-product div.product .whoop-product-bundle-offer__compare-price { font-size: 0.74rem; font-weight: 700; text-decoration: line-through; color: rgba(38, 18, 70, 0.46); } body.single-product div.product .whoop-product-bundle-offer__unit { display: inline-flex; align-items: center; min-height: 20px; padding: 0 5px; border-radius: 999px; background: rgba(38, 18, 70, 0.08); color: rgba(38, 18, 70, 0.72); font-size: 0.64rem; font-weight: 700; } body.single-product div.product .whoop-product-panel-secondary-cta { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 46px !important; border: 1px solid rgba(177, 129, 219, 0.8) !important; border-radius: 16px !important; background: #fff !important; color: #5a477f !important; font-size: 1rem !important; font-weight: 700 !important; letter-spacing: 0.04em !important; transition: all 0.2s ease !important; text-decoration: none !important; } body.single-product div.product .whoop-product-panel-secondary-cta:hover { background: #261246 !important; color: #fff !important; border-color: #261246 !important; box-shadow: 0 4px 16px rgba(38, 18, 70, 0.25) !important; transform: translateY(-1px) !important; } body.single-product div.product .whoop-product-panel-trust-strip { margin-top: 16px; padding-top: 0; border-top: 0; color: #6b5c92; } body.single-product div.product .product_meta { margin-top: 0; padding-top: 0; border-top: 0; color: rgba(15, 23, 42, 0.68); font-size: 0.96rem; display: none; } body.single-product div.product .product_meta > span { display: block; } body.single-product div.product .summary.entry-summary { display: flex; flex-direction: column; height: 100%; } body.single-product div.product .summary.entry-summary > .price, body.single-product div.product .summary.entry-summary > form.cart, body.single-product div.product .summary.entry-summary > .product_meta { width: 100%; } body.single-product div.product .summary.entry-summary > form.cart { margin-top: 4px; } body.single-product div.product .whoop-product-details { padding: clamp(22px, 2.5vw, 34px); } body.single-product div.product .woocommerce-tabs { margin: 0; } body.single-product div.product .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; padding: 0; border: 0; } body.single-product div.product .woocommerce-tabs ul.tabs::before, body.single-product div.product .woocommerce-tabs ul.tabs::after { display: none; } body.single-product div.product .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; border: 0; background: transparent; border-radius: 999px; } body.single-product div.product .woocommerce-tabs ul.tabs li::before, body.single-product div.product .woocommerce-tabs ul.tabs li::after { display: none; } body.single-product div.product .woocommerce-tabs ul.tabs li a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 999px; background: #f6f8fc; color: rgba(15, 23, 42, 0.68); font-size: 0.95rem; font-weight: 700; } body.single-product div.product .woocommerce-tabs ul.tabs li.active a, body.single-product div.product .woocommerce-tabs ul.tabs li a:hover { background: #000; border-color: #000; color: #fff; } body.single-product div.product .woocommerce-Tabs-panel { margin: 0; padding: 28px; border: 0 !important; border-radius: 24px; background: #fff; box-shadow: none; } body.single-product div.product .woocommerce-Tabs-panel--description.panel.entry-content.wc-tab { border: 0 !important; box-shadow: none !important; } body.single-product div.product .woocommerce-Tabs-panel > h2:first-child { display: none; } body.single-product div.product .woocommerce-Tabs-panel p, body.single-product div.product .woocommerce-Tabs-panel li { color: rgba(15, 23, 42, 0.8); font-size: 1rem; line-height: 1.75; } body.single-product div.product .woocommerce-Tabs-panel img { width: 100%; height: auto; border-radius: 20px; margin-top: 18px; } body.single-product .product-steps, body.single-product .product-note { margin-top: 22px; } body.single-product .product-steps .container, body.single-product .product-note .container { max-width: none; padding: 0; } body.single-product .product-steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } body.single-product .product-steps-card { padding: 22px 20px; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 22px; background: #fff; box-shadow: none; } body.single-product .product-steps-card-bar { display: none; } body.single-product .product-steps-label { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; margin-bottom: 14px; border-radius: 999px; background: #edf3fb; color: rgba(15, 23, 42, 0.7); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } body.single-product .product-steps-copy h3 { margin: 0 0 10px; font-size: 1.1rem; line-height: 1.35; color: var(--text, #000); } body.single-product .product-steps-copy p { margin: 0; color: rgba(15, 23, 42, 0.74); line-height: 1.65; } body.single-product .product-note-row { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 18px; background: #f7fafc; } body.single-product .product-note-icon { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: rgba(47, 163, 242, 0.12); color: var(--primary, #2fa3f2); display: inline-flex; align-items: center; justify-content: center; } /* ——— Mobile hero cleanup ——— */ @media (max-width: 880px) { body.single-product .hero :where(.logo, .custom-logo-link, .custom-logo, .hero-brandmark, .hero-logo) { display: none !important; } body.single-product .page-article { width: min(100%, calc(100% - 18px)) !important; padding-top: calc(var(--header-h, 101px) + 8px) !important; } body.single-product div.product .whoop-product-hero { display: block; } body.single-product div.product .tier-shell, body.single-product div.product .whoop-product-panel-shell { grid-template-columns: 1fr !important; } body.single-product div.product .tier-media, body.single-product div.product .whoop-product-panel-media { border-right: 0 !important; border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important; min-height: 280px !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } body.single-product div.product .whoop-product-panel-visual, body.single-product div.product .whoop-product-panel-visual--custom { width: 100% !important; justify-content: center !important; align-items: center !important; } body.single-product div.product .whoop-product-panel-visual img, body.single-product div.product .whoop-product-panel-visual--custom img { width: 100% !important; max-width: 400px !important; height: auto !important; object-fit: contain !important; margin: 0 auto !important; } body.single-product div.product .woocommerce-product-gallery { align-items: center !important; justify-content: center !important; } body.single-product div.product .woocommerce-product-gallery__image { justify-content: center !important; align-items: center !important; } body.single-product div.product .woocommerce-product-gallery__image img { max-height: 340px !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; object-fit: contain !important; } body.single-product div.product .woocommerce-product-gallery, body.single-product div.product .whoop-product-summary-card { min-height: auto !important; } body.single-product div.product .woocommerce-product-gallery { padding: 0 !important; min-height: auto !important; } body.single-product div.product .whoop-product-summary-card { grid-template-columns: 1fr !important; grid-template-areas: "certs" "title" "features" "price" "actions" "bundles" !important; padding: 16px 14px 18px !important; margin-top: 0 !important; row-gap: 0 !important; } body.single-product div.product .whoop-product-summary-card > .whoop-product-bundle-offers { margin-top: 14px !important; } body.single-product div.product .whoop-product-bundle-offers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body.single-product div.product .tier-body, body.single-product div.product .tier-body.whoop-product-panel-body { padding: 14px 14px 18px !important; } body.single-product div.product .whoop-product-panel-features li { max-width: none; font-size: 0.95rem; } body.single-product div.product .whoop-product-panel-certs .tier-cert { width: 56px; height: 56px; flex-basis: 56px; } body.single-product div.product .summary .cart { grid-template-columns: 1fr; } body.single-product div.product form.cart { grid-template-columns: 1fr; justify-items: stretch; } body.single-product div.product .summary .quantity { justify-content: center; width: 100% !important; gap: 10px; } body.single-product div.product .whoop-qty-step { width: 50px; height: 50px; flex-basis: 50px; } body.single-product div.product .summary .quantity .qty { width: 84px; min-height: 50px; } body.single-product div.product .single_add_to_cart_button.button, body.single-product div.product .whoop-product-panel-secondary-cta { width: 100%; min-width: 0; min-height: 44px; } body.single-product div.product .whoop-product-panel-actions { gap: 4px; } body.single-product div.product .whoop-product-bundle-offers { margin-top: 12px; } body.single-product div.product .whoop-product-bundle-offers__grid { grid-template-columns: 1fr; } body.single-product div.product .whoop-product-bundle-offer { grid-template-columns: 1fr; gap: 10px; padding: 14px; } body.single-product div.product .whoop-product-bundle-offer__visual { justify-content: flex-start; } body.single-product div.product .whoop-product-details { padding: 18px; } body.single-product div.product .woocommerce-Tabs-panel { padding: 18px; } body.single-product .product-steps-grid { grid-template-columns: 1fr; } } /* ========================================================= * REDESIGN — single product page (overrides above legacy) * Strategy: * 1. Replace 2-column grid in summary card with natural * vertical flow (flex column). * 2. Pull bundle offers into a richer, wider card. * 3. Add trust-badge grid (4 cells, responsive 2x2 / 4x1). * 4. Improve typography hierarchy: ISO certs > Title > Price * > Features > Bundle > Actions > Trust strip. * 5. Single mobile breakpoint at 900px; everything stacks. * ========================================================= */ /* — Reset legacy grid on summary card — */ body.single-product div.product .whoop-product-summary-card { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; grid-template-rows: none !important; grid-template-areas: none !important; gap: 16px !important; padding: 28px 32px !important; border-radius: 18px !important; background: #fff !important; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 14px 40px -28px rgba(38, 18, 70, 0.18) !important; } /* Each child becomes a block in vertical flow — clear grid-area. */ body.single-product div.product .whoop-product-summary-card > * { grid-area: auto !important; margin: 0 !important; } /* Visual stacking inside the summary card (ISO → title → price → features → * SEPETE EKLE → bundle 2x/4x kartları → Rapor Örneğini İncele → trust badges). * * .whoop-product-panel-actions sits BEFORE bundle (order 5) so "Sepete Ekle" * is the primary CTA. The new `--secondary` variant introduced in v1.9.34 * carries the outline "Rapor Örneğini İncele" button and sits AFTER bundle * (order 7). Without an explicit order for the secondary variant it would * inherit order 6 and stack on top of the bundle again. */ body.single-product div.product .whoop-product-summary-card > .whoop-product-panel-certs { order: 1; } body.single-product div.product .whoop-product-summary-card > .product_title { order: 2; } body.single-product div.product .whoop-product-summary-card > .price { order: 3; } body.single-product div.product .whoop-product-summary-card > .whoop-product-panel-features { order: 4; } body.single-product div.product .whoop-product-summary-card > .whoop-product-panel-actions { order: 5; } body.single-product div.product .whoop-product-summary-card > .whoop-product-bundle-offers { order: 6; } body.single-product div.product .whoop-product-summary-card > .whoop-product-panel-actions--secondary { order: 7; } body.single-product div.product .whoop-product-summary-card > .whoop-trust-badges { order: 8; } body.single-product div.product .whoop-product-summary-card > .whoop-product-panel-trust-strip { order: 9; } /* — ISO certificate badges, bigger & cleaner — */ body.single-product div.product .whoop-product-panel-certs { display: flex; gap: 10px; margin: 0 !important; flex-wrap: wrap; } body.single-product div.product .whoop-product-panel-certs .tier-cert { width: 64px !important; height: 64px !important; padding: 6px !important; border: 1px solid rgba(38, 18, 70, 0.10) !important; border-radius: 14px !important; background: linear-gradient(180deg, #ffffff 0%, #f8f5fd 100%) !important; flex: 0 0 64px !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 6px rgba(38, 18, 70, 0.06); } /* — Title — */ body.single-product div.product .product_title { font-size: clamp(1.6rem, 2.2vw, 2.4rem) !important; line-height: 1.05 !important; font-weight: 800 !important; letter-spacing: -0.03em !important; color: #261246 !important; margin: 0 !important; } /* — Price (big, sale + regular together) — */ body.single-product div.product .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; font-size: clamp(1.6rem, 2vw, 2.1rem) !important; font-weight: 800; color: #261246; margin: 4px 0 0 !important; } body.single-product div.product .price del, body.single-product div.product .price del .woocommerce-Price-amount { font-size: 1rem !important; font-weight: 600 !important; color: rgba(38, 18, 70, 0.45) !important; text-decoration: line-through; } body.single-product div.product .price ins, body.single-product div.product .price > .woocommerce-Price-amount:last-child { text-decoration: none !important; color: #d4006c !important; } /* — Features list — */ body.single-product div.product .whoop-product-panel-features { margin: 0 !important; padding: 14px 0 0 !important; border-top: 1px solid rgba(38, 18, 70, 0.08) !important; display: grid !important; gap: 8px !important; max-width: 100% !important; width: 100% !important; } body.single-product div.product .whoop-product-panel-features li { grid-template-columns: 20px minmax(0, 1fr) !important; font-size: 0.97rem !important; line-height: 1.4 !important; color: #4a3a78; } body.single-product div.product .whoop-product-panel-features svg { width: 20px !important; height: 20px !important; margin-top: 1px !important; color: #2FA3F2 !important; } /* — Bundle section — wider, richer card — */ body.single-product div.product .whoop-product-bundle-offers { margin: 4px 0 0 !important; padding: 18px 18px 16px !important; border-radius: 16px !important; background: linear-gradient(135deg, #faf8ff 0%, #f3eefb 100%) !important; border: 1px solid rgba(38, 18, 70, 0.08) !important; } body.single-product div.product .whoop-product-bundle-offers__heading { font-size: 0.78rem !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #261246 !important; margin: 0 0 12px !important; display: flex; align-items: center; gap: 8px; } body.single-product div.product .whoop-product-bundle-offers__heading::before { content: ""; width: 16px; height: 16px; background: radial-gradient(circle, #d4006c 0%, #d4006c 35%, transparent 36%); border-radius: 50%; flex: 0 0 16px; } body.single-product div.product .whoop-product-bundle-offers__grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; } body.single-product div.product .whoop-product-bundle-offer { grid-template-columns: 78px minmax(0, 1fr) !important; gap: 14px !important; align-items: center !important; padding: 12px 14px !important; border-radius: 12px !important; background: #fff !important; border: 1px solid rgba(38, 18, 70, 0.08) !important; box-shadow: 0 1px 2px rgba(38, 18, 70, 0.04) !important; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } body.single-product div.product .whoop-product-bundle-offer:hover, body.single-product div.product .whoop-product-bundle-offer.is-selected { transform: translateY(-1px); border-color: #2FA3F2 !important; box-shadow: 0 6px 18px -8px rgba(47, 163, 242, 0.4) !important; cursor: pointer; } body.single-product div.product .whoop-product-bundle-offer__visual { width: 78px; height: 78px; background: linear-gradient(135deg, #261246 0%, #4b2670 100%); border-radius: 10px; color: #fff; display: flex !important; align-items: center; justify-content: center; position: relative; overflow: hidden; } body.single-product div.product .whoop-product-bundle-offer__visual img { display: none !important; /* hide product thumbnail — use big number instead */ } body.single-product div.product .whoop-product-bundle-offer__quantity { font-size: 1.9rem !important; font-weight: 900 !important; letter-spacing: -0.04em !important; color: #fff !important; line-height: 1 !important; } body.single-product div.product .whoop-product-bundle-offer__body { display: flex; flex-direction: column; gap: 4px; } body.single-product div.product .whoop-product-bundle-offer__title { font-size: 0.95rem !important; font-weight: 700 !important; line-height: 1.2 !important; color: #261246 !important; margin: 0 !important; } body.single-product div.product .whoop-product-bundle-offer__badge { display: inline-flex !important; align-items: center !important; padding: 3px 8px !important; min-height: 0 !important; margin: 0 !important; border-radius: 4px !important; background: linear-gradient(135deg, #d4006c, #ff3399) !important; color: #fff !important; font-size: 0.7rem !important; font-weight: 800 !important; letter-spacing: 0.04em !important; align-self: flex-start; } body.single-product div.product .whoop-product-bundle-offer__prices { margin: 2px 0 0 !important; gap: 8px !important; } body.single-product div.product .whoop-product-bundle-offer__price { font-size: 1.15rem !important; color: #261246 !important; } body.single-product div.product .whoop-product-bundle-offer__price .woocommerce-Price-amount { font-weight: 800 !important; } body.single-product div.product .whoop-product-bundle-offer__compare-price { font-size: 0.85rem !important; } /* — Trust badge grid (4 cells, 2x2 → 4x1 on wide) — */ body.single-product div.product .whoop-trust-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px 0 0; margin: 4px 0 0 !important; border-top: 1px solid rgba(38, 18, 70, 0.08); } body.single-product div.product .whoop-trust-badge { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 10px; background: #faf8fd; border: 1px solid rgba(38, 18, 70, 0.05); text-align: center; } body.single-product div.product .whoop-trust-badge__icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #2FA3F2, #1e7fc4); color: #fff; } body.single-product div.product .whoop-trust-badge__icon svg { width: 20px; height: 20px; } body.single-product div.product .whoop-trust-badge__label { font-size: 0.72rem; font-weight: 700; color: #261246; line-height: 1.2; } /* — Add-to-cart row — */ body.single-product div.product .whoop-product-panel-actions { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 0 !important; } body.single-product div.product .whoop-product-panel-actions form.cart { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; } body.single-product div.product .whoop-product-panel-actions .quantity { flex: 0 0 auto; } body.single-product div.product .whoop-product-panel-actions .single_add_to_cart_button { flex: 1 1 240px; min-height: 54px !important; font-size: 1rem !important; font-weight: 800 !important; letter-spacing: 0.06em !important; } body.single-product div.product .whoop-product-panel-secondary-cta { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 50px !important; border-radius: 12px !important; font-weight: 700 !important; } /* — Hide the old single-line trust strip (replaced by 4-cell grid) — */ body.single-product div.product .whoop-product-panel-trust-strip { display: none !important; } /* — Responsive: mobile breakpoint at 900px (everything stacks) — */ @media (max-width: 900px) { body.single-product div.product .whoop-product-summary-card { padding: 20px 18px !important; gap: 14px !important; border-radius: 14px !important; } body.single-product div.product .product_title { font-size: 1.55rem !important; } body.single-product div.product .price { font-size: 1.55rem !important; } body.single-product div.product .whoop-product-panel-certs .tier-cert { width: 54px !important; height: 54px !important; flex-basis: 54px !important; } body.single-product div.product .whoop-product-bundle-offers { padding: 14px !important; } body.single-product div.product .whoop-product-bundle-offer { grid-template-columns: 64px minmax(0, 1fr) !important; gap: 12px !important; padding: 10px 12px !important; } body.single-product div.product .whoop-product-bundle-offer__visual { width: 64px; height: 64px; } body.single-product div.product .whoop-product-bundle-offer__quantity { font-size: 1.55rem !important; } body.single-product div.product .whoop-trust-badges { grid-template-columns: repeat(2, 1fr); } body.single-product div.product .whoop-product-panel-actions form.cart { flex-direction: column; align-items: stretch; } body.single-product div.product .whoop-product-panel-actions .quantity { width: 100%; justify-content: center; } body.single-product div.product .whoop-product-panel-actions .single_add_to_cart_button { width: 100%; } } /* Very small phones */ @media (max-width: 420px) { body.single-product div.product .whoop-product-summary-card { padding: 16px 14px !important; } body.single-product div.product .whoop-product-panel-certs .tier-cert { width: 48px !important; height: 48px !important; flex-basis: 48px !important; } body.single-product div.product .whoop-product-bundle-offer { grid-template-columns: 56px minmax(0, 1fr) !important; } body.single-product div.product .whoop-product-bundle-offer__visual { width: 56px; height: 56px; } body.single-product div.product .whoop-product-bundle-offer__quantity { font-size: 1.3rem !important; } } /* ========================================================= * LAYOUT PASS 2 — fix proportions, sticky image, mobile buttons * Strategy: * 1. Desktop grid: 1fr 1fr (eÅŸit kolonlar) — image yarı geniÅŸlik * 2. Sol image kolonu sticky → saÄŸ tarafta scroll edilirken takip * 3. Image kolonu min-height yerine kendi yüksekliÄŸi * 4. Açıklama (.whoop-product-details) ile aynı container width * 5. Mobile butonları: TÃœM butonlar 100% width + 54px yükseklik * 6. Quantity stepper'ı mobilde 100% width * 7. Trust badges desktop'ta da daha geniÅŸ * ========================================================= */ /* --- Outer panel: equal columns + matching height --- */ body.single-product div.product .tier-shell, body.single-product div.product .whoop-product-panel-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; align-items: start !important; } /* --- Image side: sticky, contained, generous padding --- */ body.single-product div.product .tier-media, body.single-product div.product .whoop-product-panel-media { position: sticky !important; top: calc(var(--header-h, 109px) + 18px) !important; align-self: start !important; min-height: 0 !important; max-height: calc(100vh - var(--header-h, 109px) - 36px) !important; padding: 28px 24px !important; background: linear-gradient(180deg, #f7f4fc 0%, #ecf3fc 100%) !important; border-right: 1px solid rgba(38, 18, 70, 0.08) !important; border-radius: 30px 0 0 30px !important; overflow: hidden !important; } /* WC gallery inside should fill width but stay centered */ body.single-product div.product .tier-media .woocommerce-product-gallery, body.single-product div.product .whoop-product-panel-media .woocommerce-product-gallery { width: 100% !important; max-width: 540px !important; margin: 0 auto !important; padding: 0 !important; float: none !important; } body.single-product div.product .tier-media .woocommerce-product-gallery__image img, body.single-product div.product .whoop-product-panel-media .woocommerce-product-gallery__image img { max-width: 100% !important; height: auto !important; max-height: calc(100vh - var(--header-h, 109px) - 100px) !important; width: auto !important; margin: 0 auto !important; object-fit: contain !important; display: block !important; } /* Hero visual (custom upload) same treatment */ body.single-product div.product .whoop-product-panel-visual, body.single-product div.product .whoop-product-panel-visual--custom { width: 100% !important; max-width: 540px !important; margin: 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; } body.single-product div.product .whoop-product-panel-visual img, body.single-product div.product .whoop-product-panel-visual--custom img { max-width: 100% !important; max-height: calc(100vh - var(--header-h, 109px) - 100px) !important; width: auto !important; height: auto !important; object-fit: contain !important; } /* --- Summary card: tighter padding, no excess margin --- */ body.single-product div.product .whoop-product-summary-card { padding: 32px 36px !important; border-radius: 0 30px 30px 0 !important; box-shadow: none !important; background: #fff !important; } /* --- Trust badges: more breathing room on desktop --- */ body.single-product div.product .whoop-trust-badges { gap: 10px !important; padding: 16px 0 0 !important; } body.single-product div.product .whoop-trust-badge { padding: 12px 8px !important; gap: 8px !important; } body.single-product div.product .whoop-trust-badge__icon { width: 40px !important; height: 40px !important; } body.single-product div.product .whoop-trust-badge__icon svg { width: 22px !important; height: 22px !important; } body.single-product div.product .whoop-trust-badge__label { font-size: 0.78rem !important; line-height: 1.25 !important; } /* --- Add-to-cart row on desktop: qty + button side-by-side --- */ body.single-product div.product .whoop-product-panel-actions form.cart { display: grid !important; grid-template-columns: auto 1fr !important; gap: 12px !important; align-items: stretch !important; } body.single-product div.product .whoop-product-panel-actions .quantity { display: flex !important; align-items: center !important; gap: 6px !important; background: #f4f2f9; border-radius: 12px; padding: 4px; margin: 0 !important; } body.single-product div.product .whoop-product-panel-actions .quantity input.qty { width: 48px !important; min-height: 46px !important; border: 0 !important; background: transparent !important; font-weight: 800 !important; text-align: center !important; } body.single-product div.product .whoop-qty-step { width: 38px !important; height: 38px !important; min-height: 38px !important; border-radius: 8px !important; background: #fff !important; flex-basis: 38px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 1.1rem !important; font-weight: 700 !important; color: #261246 !important; border: 1px solid rgba(38, 18, 70, 0.1) !important; box-shadow: 0 1px 2px rgba(38, 18, 70, 0.05) !important; } body.single-product div.product .single_add_to_cart_button.button { min-height: 54px !important; border-radius: 12px !important; background: linear-gradient(135deg, #261246 0%, #3d1d6e 100%) !important; color: #fff !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; font-size: 0.95rem !important; box-shadow: 0 6px 18px -8px rgba(38, 18, 70, 0.45) !important; transition: transform 0.15s ease, box-shadow 0.15s ease !important; } body.single-product div.product .single_add_to_cart_button.button:hover { transform: translateY(-1px) !important; box-shadow: 0 10px 28px -10px rgba(38, 18, 70, 0.55) !important; } /* Secondary CTA (Rapor ÖrneÄŸini Ä°ncele) — matches primary height */ body.single-product div.product .whoop-product-panel-secondary-cta { min-height: 54px !important; border-radius: 12px !important; font-size: 0.95rem !important; letter-spacing: 0.04em !important; border: 1.5px solid rgba(38, 18, 70, 0.15) !important; background: #fff !important; color: #261246 !important; transition: border-color 0.15s ease, background 0.15s ease !important; width: 100% !important; } body.single-product div.product .whoop-product-panel-secondary-cta:hover { border-color: #2FA3F2 !important; background: #f0f9ff !important; } /* --- Details section: same outer width as hero --- */ body.single-product div.product .whoop-product-details { margin-top: clamp(20px, 3vw, 32px) !important; padding: clamp(28px, 3vw, 40px) !important; border-radius: 28px !important; } /* ========================================================= * MOBILE PASS 2 — proportional buttons & spacing * ========================================================= */ @media (max-width: 900px) { /* Image kolonu sticky'i bırak, normal akışta önce gelsin */ body.single-product div.product .tier-media, body.single-product div.product .whoop-product-panel-media { position: static !important; top: auto !important; max-height: none !important; border-right: 0 !important; border-bottom: 1px solid rgba(38, 18, 70, 0.08) !important; border-radius: 24px 24px 0 0 !important; padding: 24px 18px !important; min-height: 320px !important; } body.single-product div.product .whoop-product-summary-card { padding: 22px 18px !important; border-radius: 0 0 24px 24px !important; } /* Tek kolon grid */ body.single-product div.product .tier-shell, body.single-product div.product .whoop-product-panel-shell { grid-template-columns: 1fr !important; } /* Image max-height — viewport'un yarısına sığsın */ body.single-product div.product .tier-media .woocommerce-product-gallery__image img, body.single-product div.product .whoop-product-panel-visual img { max-height: 50vh !important; } /* Cart form: qty + button stacked, EŞIT yükseklik (54px) */ body.single-product div.product .whoop-product-panel-actions form.cart { grid-template-columns: 1fr !important; gap: 10px !important; } body.single-product div.product .whoop-product-panel-actions .quantity { width: 100% !important; justify-content: center !important; min-height: 54px !important; padding: 6px !important; } body.single-product div.product .whoop-qty-step { width: 46px !important; height: 46px !important; min-height: 46px !important; flex-basis: 46px !important; } body.single-product div.product .whoop-product-panel-actions .quantity input.qty { flex: 1 1 auto !important; width: auto !important; min-height: 46px !important; font-size: 1.05rem !important; } body.single-product div.product .single_add_to_cart_button.button { width: 100% !important; min-height: 54px !important; font-size: 1rem !important; } body.single-product div.product .whoop-product-panel-secondary-cta { width: 100% !important; min-height: 54px !important; font-size: 0.95rem !important; } /* Trust badges — 2x2, eÅŸit kareler */ body.single-product div.product .whoop-trust-badges { gap: 8px !important; } body.single-product div.product .whoop-trust-badge { padding: 14px 6px !important; min-height: 90px !important; justify-content: center !important; } body.single-product div.product .whoop-trust-badge__icon { width: 42px !important; height: 42px !important; } body.single-product div.product .whoop-trust-badge__label { font-size: 0.78rem !important; } /* Bundle kartları mobil */ body.single-product div.product .whoop-product-bundle-offers { padding: 16px !important; } body.single-product div.product .whoop-product-bundle-offer { grid-template-columns: 72px minmax(0, 1fr) !important; padding: 12px !important; } body.single-product div.product .whoop-product-bundle-offer__visual { width: 72px !important; height: 72px !important; } body.single-product div.product .whoop-product-bundle-offer__quantity { font-size: 1.7rem !important; } /* Details section padding mobile */ body.single-product div.product .whoop-product-details { padding: 22px 18px !important; border-radius: 24px !important; } } /* Tablet sweet spot (901-1100px): biraz daha sıkı 50/50 kalsın */ @media (min-width: 901px) and (max-width: 1100px) { body.single-product div.product .whoop-product-summary-card { padding: 24px 24px !important; } body.single-product div.product .tier-media, body.single-product div.product .whoop-product-panel-media { padding: 22px 18px !important; } } /* ========================================================= * LAYOUT PASS 3 — top padding fix + bundle redesign + full-width buttons * Strategy: * 1. Summary card top padding drastically reduced (32→18 desktop, 22→14 mobile) * 2. Bundle card: yeni layout — 60px visual + flexible body, badge absolute top-right * 3. Image artık varsa ya da yoksa quantity text fallback (PHP tarafı halletti) * 4. Tüm action butonları (qty + SEPETE EKLE + Rapor ÖrneÄŸini Ä°ncele) tam geniÅŸlik * desktop'ta da. Qty stepper buton geniÅŸliÄŸinde. * ========================================================= */ /* --- Reduce top padding so ISO badges sit close to top edge --- */ body.single-product div.product .whoop-product-summary-card { padding: 22px 32px 28px !important; } @media (min-width: 901px) and (max-width: 1100px) { body.single-product div.product .whoop-product-summary-card { padding: 18px 22px 22px !important; } } /* --- Bundle card: cleaner horizontal layout --- */ body.single-product div.product .whoop-product-bundle-offer { grid-template-columns: 60px minmax(0, 1fr) !important; gap: 14px !important; padding: 14px 16px !important; position: relative !important; align-items: center !important; } body.single-product div.product .whoop-product-bundle-offer__visual { width: 60px !important; height: 60px !important; border-radius: 10px !important; overflow: hidden !important; flex: 0 0 60px !important; background: linear-gradient(135deg, #261246 0%, #4b2670 100%) !important; position: relative !important; } /* Show image if provided */ body.single-product div.product .whoop-product-bundle-offer__visual img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 10px !important; } /* When image exists, slightly dim visual gradient bg */ body.single-product div.product .whoop-product-bundle-offer__visual:has(img) { background: #f3eefb !important; } /* Hide quantity text when image is present (image takes over) */ body.single-product div.product .whoop-product-bundle-offer__visual:has(img) .whoop-product-bundle-offer__quantity { display: none !important; } body.single-product div.product .whoop-product-bundle-offer__quantity { font-size: 1.55rem !important; font-weight: 900 !important; color: #fff !important; letter-spacing: -0.04em !important; line-height: 1 !important; } /* Body: title + prices stacked, full remaining width */ body.single-product div.product .whoop-product-bundle-offer__body { display: flex !important; flex-direction: column !important; gap: 4px !important; min-width: 0 !important; padding-right: 56px !important; /* leave room for absolute badge */ } body.single-product div.product .whoop-product-bundle-offer__title { font-size: 0.92rem !important; font-weight: 700 !important; color: #261246 !important; margin: 0 !important; line-height: 1.25 !important; } body.single-product div.product .whoop-product-bundle-offer__prices { display: flex !important; flex-wrap: nowrap !important; align-items: baseline !important; gap: 8px !important; margin: 2px 0 0 !important; } body.single-product div.product .whoop-product-bundle-offer__price { font-size: 1.05rem !important; font-weight: 800 !important; color: #261246 !important; } body.single-product div.product .whoop-product-bundle-offer__price .woocommerce-Price-amount { font-weight: 800 !important; } body.single-product div.product .whoop-product-bundle-offer__compare-price { font-size: 0.82rem !important; font-weight: 600 !important; color: rgba(38, 18, 70, 0.42) !important; } /* Badge pinned to top-right of card */ body.single-product div.product .whoop-product-bundle-offer__badge { position: absolute !important; top: 14px !important; right: 16px !important; margin: 0 !important; align-self: auto !important; } /* --- Actions: FULL WIDTH, stacked even on desktop --- */ body.single-product div.product .whoop-product-panel-actions { gap: 12px !important; } body.single-product div.product .whoop-product-panel-actions form.cart { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; width: 100% !important; } body.single-product div.product .whoop-product-panel-actions .quantity { width: 100% !important; min-height: 54px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; background: #f4f2f9 !important; border-radius: 12px !important; padding: 5px !important; } body.single-product div.product .whoop-product-panel-actions .quantity input.qty { flex: 0 0 80px !important; width: 80px !important; min-height: 44px !important; background: transparent !important; border: 0 !important; font-weight: 800 !important; font-size: 1.05rem !important; text-align: center !important; color: #261246 !important; } body.single-product div.product .whoop-product-panel-actions .whoop-qty-step { width: 44px !important; height: 44px !important; min-height: 44px !important; flex-basis: 44px !important; border-radius: 10px !important; background: #fff !important; border: 1px solid rgba(38, 18, 70, 0.1) !important; color: #261246 !important; font-weight: 700 !important; font-size: 1.15rem !important; } body.single-product div.product .single_add_to_cart_button.button { width: 100% !important; min-height: 56px !important; font-size: 1rem !important; } body.single-product div.product .whoop-product-panel-secondary-cta { width: 100% !important; min-height: 56px !important; } /* ========================================================= * LAYOUT PASS 4 — FINAL & AGGRESSIVE * Bu blok dosyanın en sonunda. Tüm önceki specificity savaÅŸlarını * bitirir. Cascade kurallarına göre en sonda tanımlandığı için kazanır. * * Düzeltilen sorunlar: * 1. SaÄŸ panel üst boÅŸluÄŸu (line 597 padding-top:12 ezili) — * gerçek sebep: tier-shell align-items + tier-body align-self * 2. form.cart grid'inin justify-items:start nedeniyle çocukların * content-width alması — stretch'e çevriyoruz * 3. Bundle .whoop-product-bundle-offers__grid display:grid ile * template tanımlanmadığında auto-sizing — explicit 1fr column * ========================================================= */ /* === FIX 1: Top alignment — grid items start, no min-height inheritance === */ html body.single-product div.product .tier-shell, html body.single-product div.product .whoop-product-panel-shell { align-items: start !important; align-content: start !important; } /* Right column must hug top, no vertical centering */ html body.single-product div.product .whoop-product-summary-card, html body.single-product div.product .summary.entry-summary.whoop-product-summary-card, html body.single-product div.product .tier-body.whoop-product-panel-body { align-self: start !important; justify-self: stretch !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 14px 28px 28px !important; min-height: 0 !important; height: auto !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 14px !important; } /* === FIX 2: Force every child of summary card to full width === */ html body.single-product div.product .whoop-product-summary-card > *, html body.single-product div.product .tier-body.whoop-product-panel-body > * { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; } /* ISO certs row is flex, not block — allow width auto for its inner cells */ html body.single-product div.product .whoop-product-summary-card > .whoop-product-panel-certs { display: flex !important; width: 100% !important; justify-content: flex-start !important; } /* === FIX 3: Bundle wrapper + grid full width === */ html body.single-product div.product .whoop-product-bundle-offers { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; display: block !important; } html body.single-product div.product .whoop-product-bundle-offers__grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; gap: 10px !important; } html body.single-product div.product .whoop-product-bundle-offer { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: 60px minmax(0, 1fr) !important; } /* === FIX 4: Actions area + form.cart + quantity + buttons all 100% === */ html body.single-product div.product .whoop-product-panel-actions { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } /* Form.cart was a 1-col grid with justify-items:start — switch to stretch */ html body.single-product div.product .whoop-product-panel-actions form.cart, html body.single-product div.product form.cart { display: grid !important; grid-template-columns: 1fr !important; justify-items: stretch !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; gap: 12px !important; box-sizing: border-box !important; } /* Quantity stepper — block-level pill, full width */ html body.single-product div.product .whoop-product-panel-actions .quantity, html body.single-product div.product form.cart .quantity, html body.single-product div.product .summary .quantity { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; min-height: 54px !important; padding: 5px !important; background: #f4f2f9 !important; border-radius: 12px !important; box-sizing: border-box !important; grid-area: auto !important; } html body.single-product div.product .whoop-product-panel-actions .quantity input.qty, html body.single-product div.product .summary .quantity .qty { flex: 0 0 80px !important; width: 80px !important; min-height: 44px !important; background: transparent !important; border: 0 !important; font-weight: 800 !important; font-size: 1.05rem !important; text-align: center !important; color: #261246 !important; box-shadow: none !important; padding: 0 !important; } html body.single-product div.product .whoop-qty-step { flex: 0 0 44px !important; width: 44px !important; height: 44px !important; min-height: 44px !important; border-radius: 10px !important; background: #fff !important; border: 1px solid rgba(38, 18, 70, 0.1) !important; color: #261246 !important; font-weight: 700 !important; font-size: 1.15rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; box-shadow: 0 1px 2px rgba(38, 18, 70, 0.05) !important; order: 0 !important; } /* Primary CTA button — full width, big and bold */ html body.single-product div.product .single_add_to_cart_button.button, html body.single-product div.product .whoop-product-panel-actions .single_add_to_cart_button { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 56px !important; padding: 14px 28px !important; border: 0 !important; border-radius: 12px !important; background: linear-gradient(135deg, #261246 0%, #3d1d6e 100%) !important; color: #fff !important; font-weight: 800 !important; font-size: 1rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; text-align: center !important; box-shadow: 0 6px 18px -8px rgba(38, 18, 70, 0.45) !important; box-sizing: border-box !important; grid-area: auto !important; flex: none !important; cursor: pointer !important; } html body.single-product div.product .single_add_to_cart_button.button:hover, html body.single-product div.product .whoop-product-panel-actions .single_add_to_cart_button:hover { transform: translateY(-1px) !important; box-shadow: 0 10px 28px -10px rgba(38, 18, 70, 0.55) !important; background: linear-gradient(135deg, #3d1d6e 0%, #261246 100%) !important; } /* Secondary CTA — outline, full width, equal height */ html body.single-product div.product .whoop-product-panel-secondary-cta { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; min-height: 56px !important; padding: 14px 28px !important; border: 1.5px solid rgba(38, 18, 70, 0.18) !important; border-radius: 12px !important; background: #fff !important; color: #261246 !important; font-weight: 700 !important; font-size: 0.95rem !important; letter-spacing: 0.04em !important; text-decoration: none !important; box-sizing: border-box !important; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease !important; } html body.single-product div.product .whoop-product-panel-secondary-cta:hover { border-color: #2FA3F2 !important; background: #f0f9ff !important; transform: translateY(-1px) !important; } /* === FIX 5: Trust badges grid 4-col on desktop, 2x2 on mobile === */ html body.single-product div.product .whoop-trust-badges { width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; box-sizing: border-box !important; margin: 0 !important; padding: 16px 0 0 !important; border-top: 1px solid rgba(38, 18, 70, 0.08) !important; } @media (max-width: 900px) { html body.single-product div.product .whoop-trust-badges { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body.single-product div.product .whoop-product-summary-card, html body.single-product div.product .summary.entry-summary.whoop-product-summary-card, html body.single-product div.product .tier-body.whoop-product-panel-body { padding: 16px 18px 22px !important; } } @media (max-width: 420px) { html body.single-product div.product .whoop-product-summary-card { padding: 14px 14px 20px !important; } } /* ========================================================= * LAYOUT PASS 5 — kill the top empty space (final) * Tüm üst padding/margin'leri kesin sıfırla. * ========================================================= */ html body.single-product div.product .whoop-product-summary-card, html body.single-product div.product .summary.entry-summary.whoop-product-summary-card, html body.single-product div.product .tier-body.whoop-product-panel-body { padding-top: 0 !important; margin-top: 0 !important; gap: 16px !important; } /* ISO certs row — no inherent top spacing */ html body.single-product div.product .whoop-product-summary-card > .whoop-product-panel-certs, html body.single-product div.product .whoop-product-summary-card .tier-certs { margin: 24px 0 0 !important; /* small inset from top edge */ padding-top: 0 !important; } /* First child of summary card never has top margin */ html body.single-product div.product .whoop-product-summary-card > *:first-child { margin-top: 24px !important; /* uniform top inset for whichever is first */ } /* If WC notices wrapper is empty, collapse it */ html body.single-product div.product .woocommerce-notices-wrapper:empty { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; } /* WC onsale badge — keep absolute, don't push layout */ html body.single-product div.product .tier-media .onsale, html body.single-product div.product .whoop-product-panel-media .onsale { position: absolute !important; top: 18px !important; left: 18px !important; margin: 0 !important; z-index: 5 !important; } /* Tier-media must be position:relative for absolute onsale, AND not push content */ html body.single-product div.product .tier-media, html body.single-product div.product .whoop-product-panel-media { position: sticky !important; /* keep sticky behavior */ } /* Right column padding sides preserved, top zero */ @media (max-width: 900px) { html body.single-product div.product .whoop-product-summary-card { padding-top: 0 !important; } html body.single-product div.product .whoop-product-summary-card > *:first-child { margin-top: 16px !important; } } /* ========================================================= * CHECKOUT — Dünya standartı, temiz, tek-kolon stack * Stripe Checkout / Shopify Plus pattern * ========================================================= */ body.woocommerce-checkout { background: #f6f5fb !important; } body.woocommerce-checkout .page-article { width: min(1280px, calc(100% - 32px)) !important; margin: 0 auto !important; padding-top: calc(var(--header-h, 109px) + 32px) !important; padding-bottom: 80px !important; } /* ========================================================= * FOCUSED CHECKOUT — page-odeme.php template * Header/footer kaldırıldı, sadece logo + steps + güvenlik * Trendyol / Hepsiburada / Amazon / Stripe pattern * ========================================================= */ body.biitest-focused-checkout { background: #f6f5fb !important; margin: 0 !important; padding: 0 !important; /* Site fontu (Archivo) — ana site ile aynı */ font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; font-size: 16px; line-height: 1.5; color: #261246; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.biitest-focused-checkout * { font-family: inherit; } /* ---------- Minimal sticky header ---------- */ .biitest-checkout-header { background: #fff !important; border-bottom: 1px solid rgba(38, 18, 70, 0.08); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 0 rgba(38, 18, 70, 0.04); } .biitest-checkout-header__inner { max-width: 1280px; margin: 0 auto; padding: 16px 24px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; } .biitest-checkout-header__logo { justify-self: start; display: inline-flex; align-items: center; text-decoration: none !important; color: #261246; font-weight: 800; font-size: 1.2rem; } .biitest-checkout-header__logo img { max-height: 38px; width: auto; display: block; } .biitest-checkout-header__brand { letter-spacing: -0.02em; } /* Step indicator — center */ .biitest-checkout-header__center { display: flex; align-items: center; gap: 14px; } .biitest-checkout-header__step { display: inline-flex; align-items: center; gap: 8px; color: rgba(38, 18, 70, 0.4); font-size: 0.85rem; font-weight: 600; } .biitest-checkout-header__step .step-no { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(38, 18, 70, 0.08); color: rgba(38, 18, 70, 0.55); font-size: 0.78rem; font-weight: 800; } .biitest-checkout-header__step.is-active { color: #261246; } .biitest-checkout-header__step.is-active .step-no { background: linear-gradient(135deg, #261246, #3d1d6e); color: #fff; } .biitest-checkout-header__step.is-current .step-no { background: linear-gradient(135deg, #d4006c, #ff3399); box-shadow: 0 4px 12px -3px rgba(212, 0, 108, 0.4); } .biitest-checkout-header__dash { width: 28px; height: 2px; background: rgba(38, 18, 70, 0.12); border-radius: 2px; } .biitest-checkout-header__secure { justify-self: end; display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 700; color: #16a34a; background: rgba(22, 163, 74, 0.08); padding: 8px 14px; border-radius: 999px; } .biitest-checkout-header__secure svg { stroke: #16a34a; } /* ---------- Main content area ---------- */ .biitest-checkout-main { max-width: 1280px; margin: 0 auto; padding: 32px 24px 60px; } /* form.checkout grid will inherit from existing styles below */ body.biitest-focused-checkout .page-article { width: 100% !important; padding: 0 !important; margin: 0 !important; } body.biitest-focused-checkout form.checkout { display: grid !important; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) !important; gap: 32px !important; align-items: start !important; } /* Re-apply order_review sticky for focused checkout */ body.biitest-focused-checkout #order_review { position: sticky !important; top: 100px !important; /* below sticky header */ } /* ---------- Minimal footer ---------- */ .biitest-checkout-footer { background: #fff; border-top: 1px solid rgba(38, 18, 70, 0.08); margin-top: 60px; } .biitest-checkout-footer__inner { max-width: 1280px; margin: 0 auto; padding: 36px 24px 28px; } .biitest-checkout-footer__trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-bottom: 28px; border-bottom: 1px solid rgba(38, 18, 70, 0.08); } .biitest-checkout-footer__trust-item { display: flex; align-items: center; gap: 14px; } .biitest-checkout-footer__trust-item svg { flex: 0 0 22px; color: #2FA3F2; } .biitest-checkout-footer__trust-item div { display: flex; flex-direction: column; gap: 2px; } .biitest-checkout-footer__trust-item strong { font-size: 0.92rem; font-weight: 800; color: #261246; letter-spacing: -0.005em; } .biitest-checkout-footer__trust-item span { font-size: 0.78rem; color: rgba(38, 18, 70, 0.55); } .biitest-checkout-footer__contact { display: flex; justify-content: space-between; align-items: center; padding-top: 22px; gap: 24px; flex-wrap: wrap; } .biitest-checkout-footer__contact-block { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .biitest-checkout-footer__contact-label { font-size: 0.86rem; font-weight: 600; color: rgba(38, 18, 70, 0.65); } .biitest-checkout-footer__contact-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 700; color: #261246; text-decoration: none !important; padding: 6px 12px; border-radius: 999px; background: rgba(38, 18, 70, 0.04); transition: background 0.15s ease, color 0.15s ease; } .biitest-checkout-footer__contact-link:hover { background: rgba(212, 0, 108, 0.08); color: #d4006c; } .biitest-checkout-footer__contact-link svg { color: #d4006c; } .biitest-checkout-footer__copy { font-size: 0.78rem; color: rgba(38, 18, 70, 0.45); } /* ---------- Mobile responsive ---------- */ @media (max-width: 900px) { .biitest-checkout-header__inner { grid-template-columns: auto 1fr; padding: 12px 16px; gap: 12px; } .biitest-checkout-header__center { display: none; /* Mobile'da step indicator gizli */ } .biitest-checkout-header__secure { justify-self: end; font-size: 0.78rem; padding: 6px 10px; } .biitest-checkout-header__secure svg { width: 14px; height: 14px; } .biitest-checkout-header__logo img { max-height: 32px; } .biitest-checkout-main { padding: 20px 16px 40px; } body.biitest-focused-checkout form.checkout { grid-template-columns: 1fr !important; gap: 16px !important; } body.biitest-focused-checkout #order_review { position: static !important; order: -1 !important; } .biitest-checkout-footer__trust { grid-template-columns: repeat(2, 1fr); gap: 14px; padding-bottom: 22px; } .biitest-checkout-footer__contact { flex-direction: column; align-items: flex-start; gap: 14px; } .biitest-checkout-footer__inner { padding: 28px 18px 22px; } } @media (max-width: 480px) { .biitest-checkout-footer__trust { grid-template-columns: 1fr; } } body.woocommerce-checkout .page-article > article { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } body.woocommerce-checkout .woocommerce-notices-wrapper { margin: 0 0 18px !important; } body.woocommerce-checkout .woocommerce-error, body.woocommerce-checkout .woocommerce-message, body.woocommerce-checkout .woocommerce-info { background: #fff !important; border: 0 !important; border-left: 4px solid #d4006c !important; border-radius: 10px !important; padding: 14px 18px !important; margin: 0 0 12px !important; font-size: 0.93rem !important; color: #261246 !important; box-shadow: 0 2px 10px rgba(38, 18, 70, 0.06) !important; list-style: none !important; } body.woocommerce-checkout .woocommerce-message { border-left-color: #16a34a !important; } /* Eski WC coupon toggle/form'u GİZLE — biz inline kupon kullanıyoruz */ body.woocommerce-checkout .woocommerce-form-coupon-toggle, body.woocommerce-checkout form.checkout_coupon.woocommerce-form-coupon { display: none !important; } /* Login toggle bar (kupon kaldırıldığı için sadece login için stil) */ body.woocommerce-checkout .woocommerce-form-login-toggle { margin: 0 0 14px !important; } body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info, body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { background: #fff !important; border: 1px dashed rgba(38, 18, 70, 0.18) !important; border-radius: 12px !important; padding: 14px 20px 14px 52px !important; color: #4a3a78 !important; font-size: 0.93rem !important; font-weight: 500 !important; box-shadow: none !important; position: relative !important; transition: border-color 0.15s ease, background 0.15s ease !important; } body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { content: "" !important; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; background: linear-gradient(135deg, #d4006c, #ff3399); border-radius: 6px; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 12l-2-2V6a2 2 0 0 0-2-2h-4l-2-2H8a2 2 0 0 0-2 2v4l-2 2 2 2v4a2 2 0 0 0 2 2h4l2 2 2-2h4a2 2 0 0 0 2-2v-4l2-2z'/%3E%3Ccircle cx='10' cy='10' r='1'/%3E%3Ccircle cx='14' cy='14' r='1'/%3E%3Cpath d='M9 15l6-6'/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 12l-2-2V6a2 2 0 0 0-2-2h-4l-2-2H8a2 2 0 0 0-2 2v4l-2 2 2 2v4a2 2 0 0 0 2 2h4l2 2 2-2h4a2 2 0 0 0 2-2v-4l2-2z'/%3E%3Ccircle cx='10' cy='10' r='1'/%3E%3Ccircle cx='14' cy='14' r='1'/%3E%3Cpath d='M9 15l6-6'/%3E%3C/svg%3E") center/contain no-repeat; } body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before { content: "" !important; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; background: linear-gradient(135deg, #2FA3F2, #1e7fc4); border-radius: 6px; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-4 0-8 2-8 6v2h16v-2c0-4-4-6-8-6z'/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-4 0-8 2-8 6v2h16v-2c0-4-4-6-8-6z'/%3E%3C/svg%3E") center/contain no-repeat; } body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info:hover, body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info:hover { border-color: rgba(212, 0, 108, 0.35) !important; background: #fefcff !important; } body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a, body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a { color: #d4006c !important; font-weight: 700 !important; text-decoration: none !important; border-bottom: 1px dashed #d4006c !important; padding-bottom: 1px !important; } body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a:hover, body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a:hover { border-bottom-color: transparent !important; color: #ff3399 !important; } body.woocommerce-checkout form.checkout { display: grid !important; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) !important; gap: 32px !important; align-items: start !important; } body.woocommerce-checkout #customer_details { display: flex !important; flex-direction: column !important; gap: 18px !important; margin: 0 !important; padding: 0 !important; grid-column: 1 / 2 !important; } body.woocommerce-checkout #customer_details .col-1, body.woocommerce-checkout #customer_details .col-2 { float: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* WC default heading gizli — biz PHP hook ile kart içine inject ediyoruz */ body.woocommerce-checkout #order_review_heading { display: none !important; } /* Inject edilen başlık (sticky kart içinde, en üstte) */ body.woocommerce-checkout .biitest-summary-heading { font-size: 1.1rem !important; font-weight: 800 !important; color: #261246 !important; margin: 0 0 18px !important; padding: 0 0 14px !important; letter-spacing: -0.01em !important; border-bottom: 1px solid rgba(38, 18, 70, 0.08) !important; background: transparent !important; } body.woocommerce-checkout #order_review { grid-column: 2 / 3 !important; position: sticky !important; top: calc(var(--header-h, 109px) + 32px) !important; background: #fff !important; border-radius: 16px !important; padding: 26px !important; box-shadow: 0 4px 24px rgba(38, 18, 70, 0.06) !important; border: 1px solid rgba(38, 18, 70, 0.06) !important; margin: 0 !important; } body.woocommerce-checkout .woocommerce-billing-fields, body.woocommerce-checkout .woocommerce-shipping-fields, body.woocommerce-checkout .woocommerce-additional-fields { background: #fff !important; border-radius: 16px !important; padding: 28px 30px !important; border: 1px solid rgba(38, 18, 70, 0.06) !important; box-shadow: 0 2px 10px rgba(38, 18, 70, 0.04) !important; margin: 0 !important; } body.woocommerce-checkout .woocommerce-billing-fields h3, body.woocommerce-checkout .woocommerce-shipping-fields h3, body.woocommerce-checkout .woocommerce-additional-fields h3 { font-size: 1.1rem !important; font-weight: 800 !important; color: #261246 !important; margin: 0 0 20px !important; padding: 0 0 14px !important; border-bottom: 1px solid rgba(38, 18, 70, 0.08) !important; letter-spacing: -0.01em !important; } body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper, body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 16px 14px !important; } body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; } body.woocommerce-checkout .form-row { margin: 0 !important; padding: 0 !important; width: 100% !important; display: flex !important; flex-direction: column !important; min-width: 0 !important; grid-column: span 12 !important; } body.woocommerce-checkout .form-row.form-row-first { grid-column: 1 / 7 !important; } body.woocommerce-checkout .form-row.form-row-last { grid-column: 7 / 13 !important; } body.woocommerce-checkout .form-row.form-row-wide, body.woocommerce-checkout .whoop-country-select { grid-column: 1 / 13 !important; } body.woocommerce-checkout .form-row.whoop-row-third-1 { grid-column: 1 / 5 !important; } body.woocommerce-checkout .form-row.whoop-row-third-2 { grid-column: 5 / 9 !important; } body.woocommerce-checkout .form-row.whoop-row-third-3 { grid-column: 9 / 13 !important; } body.woocommerce-checkout .whoop-hidden-field { display: none !important; } body.woocommerce-checkout .form-row label { font-size: 0.85rem !important; font-weight: 600 !important; color: #4a3a78 !important; margin: 0 0 7px !important; letter-spacing: 0.005em !important; line-height: 1.3 !important; } body.woocommerce-checkout .form-row label .required, body.woocommerce-checkout .form-row label abbr[title="zorunlu"], body.woocommerce-checkout .form-row label abbr[title="required"] { color: #d4006c !important; border: 0 !important; margin-left: 2px !important; text-decoration: none !important; } body.woocommerce-checkout .form-row label .optional { color: rgba(74, 58, 120, 0.55) !important; font-weight: 500 !important; font-size: 0.8em !important; margin-left: 4px !important; } body.woocommerce-checkout .form-row input.input-text, body.woocommerce-checkout .form-row textarea, body.woocommerce-checkout .form-row select, body.woocommerce-checkout .select2-container--default .select2-selection--single { width: 100% !important; min-height: 52px !important; padding: 12px 16px !important; border: 1.5px solid rgba(38, 18, 70, 0.14) !important; border-radius: 10px !important; background: #fff !important; font-size: 0.96rem !important; color: #261246 !important; font-family: inherit !important; box-sizing: border-box !important; transition: border-color 0.15s ease, box-shadow 0.15s ease !important; box-shadow: none !important; appearance: none !important; -webkit-appearance: none !important; } body.woocommerce-checkout .form-row input.input-text::placeholder, body.woocommerce-checkout .form-row textarea::placeholder { color: rgba(74, 58, 120, 0.4) !important; font-weight: 400 !important; } body.woocommerce-checkout .form-row input.input-text:hover, body.woocommerce-checkout .form-row select:hover { border-color: rgba(38, 18, 70, 0.28) !important; } body.woocommerce-checkout .form-row input.input-text:focus, body.woocommerce-checkout .form-row textarea:focus, body.woocommerce-checkout .form-row select:focus { border-color: #2FA3F2 !important; outline: none !important; box-shadow: 0 0 0 4px rgba(47, 163, 242, 0.12) !important; } body.woocommerce-checkout .form-row textarea { min-height: 88px !important; resize: vertical !important; } body.woocommerce-checkout .form-row select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23261246' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important; background-position: right 16px center !important; background-repeat: no-repeat !important; background-size: 12px 8px !important; padding-right: 42px !important; } body.woocommerce-checkout .select2-container { width: 100% !important; } body.woocommerce-checkout .select2-container--default .select2-selection--single { height: auto !important; display: flex !important; align-items: center !important; } body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4 !important; padding: 0 !important; color: #261246 !important; } body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 50px !important; top: 0 !important; right: 8px !important; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23261246' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 12px 8px !important; } body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none !important; } body.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single, body.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single { border-color: #2FA3F2 !important; box-shadow: 0 0 0 4px rgba(47, 163, 242, 0.12) !important; } body.woocommerce-checkout .select2-dropdown { border: 1.5px solid #2FA3F2 !important; border-radius: 10px !important; box-shadow: 0 12px 32px rgba(38, 18, 70, 0.16) !important; overflow: hidden !important; margin-top: 4px !important; } body.woocommerce-checkout .select2-search--dropdown .select2-search__field { border: 1.5px solid rgba(38, 18, 70, 0.14) !important; border-radius: 8px !important; padding: 8px 12px !important; font-size: 0.92rem !important; } body.woocommerce-checkout .select2-results__option--highlighted[aria-selected] { background-color: #f0f9ff !important; color: #261246 !important; } body.woocommerce-checkout .form-row.woocommerce-invalid input, body.woocommerce-checkout .form-row.woocommerce-invalid select, body.woocommerce-checkout .form-row.woocommerce-invalid .select2-selection { border-color: #d4006c !important; background: #fff5f9 !important; } body.woocommerce-checkout .form-row.woocommerce-validated input, body.woocommerce-checkout .form-row.woocommerce-validated select, body.woocommerce-checkout .form-row.woocommerce-validated .select2-selection { border-color: #16a34a !important; } /* ---------- Teslimat önce / fatura isteğe bağlı ---------- */ body.woocommerce-checkout .biitest-checkout-delivery { background: #fff !important; border-radius: 16px !important; padding: 28px 30px !important; border: 1px solid rgba(38, 18, 70, 0.06) !important; box-shadow: 0 2px 10px rgba(38, 18, 70, 0.04) !important; margin: 0 0 18px !important; } body.woocommerce-checkout .biitest-checkout-delivery > h3 { font-size: 1.1rem !important; font-weight: 800 !important; color: #261246 !important; margin: 0 0 20px !important; padding: 0 0 14px !important; border-bottom: 1px solid rgba(38, 18, 70, 0.08) !important; letter-spacing: -0.01em !important; } body.woocommerce-checkout .biitest-checkout-contact { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 16px 14px !important; margin: 0 0 16px !important; padding: 0 0 16px !important; border-bottom: 1px solid rgba(38, 18, 70, 0.08) !important; } body.woocommerce-checkout .biitest-checkout-invoice-meta { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 16px 14px !important; margin: 0 0 16px !important; padding: 0 0 16px !important; border-bottom: 1px solid rgba(38, 18, 70, 0.08) !important; } body.woocommerce-checkout .biitest-checkout-invoice-meta:empty { display: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } body.woocommerce-checkout .biitest-checkout-invoice-meta .form-row, body.woocommerce-checkout .biitest-checkout-invoice-meta > .form-row-wide, body.woocommerce-checkout .biitest-checkout-invoice-meta > div { grid-column: 1 / 13 !important; min-width: 0 !important; } body.woocommerce-checkout .biitest-checkout-invoice-meta #billing_phone_field, body.woocommerce-checkout .biitest-checkout-invoice-meta #billing_email_field, body.woocommerce-checkout .biitest-checkout-invoice-meta #shipping_phone_field, body.woocommerce-checkout .biitest-checkout-invoice-meta [id*="telefon"], body.woocommerce-checkout .biitest-billing-section #billing_phone_field, body.woocommerce-checkout .biitest-billing-section #billing_email_field { display: none !important; } body.woocommerce-checkout .biitest-checkout-delivery .woocommerce-shipping-fields__field-wrapper, body.woocommerce-checkout .biitest-checkout-delivery .shipping_address { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 16px 14px !important; margin-top: 0 !important; } body.woocommerce-checkout .biitest-checkout-delivery .form-row.form-row-first { grid-column: 1 / 7 !important; } body.woocommerce-checkout .biitest-checkout-delivery .form-row.form-row-last { grid-column: 7 / 13 !important; } body.woocommerce-checkout .biitest-checkout-delivery .form-row.form-row-wide, body.woocommerce-checkout .biitest-checkout-delivery .whoop-country-select { grid-column: 1 / 13 !important; } body.woocommerce-checkout .biitest-checkout-delivery .form-row.whoop-row-third-1 { grid-column: 1 / 5 !important; } body.woocommerce-checkout .biitest-checkout-delivery .form-row.whoop-row-third-2 { grid-column: 5 / 9 !important; } body.woocommerce-checkout .biitest-checkout-delivery .form-row.whoop-row-third-3 { grid-column: 9 / 13 !important; } body.woocommerce-checkout .biitest-checkout-delivery .biitest-checkout-contact .form-row.form-row-first { grid-column: 1 / 7 !important; } body.woocommerce-checkout .biitest-checkout-delivery .biitest-checkout-contact .form-row.form-row-last { grid-column: 7 / 13 !important; } body.woocommerce-checkout .biitest-bill-different-toggle { margin: 0 0 18px !important; padding: 14px 18px !important; border: 1px solid rgba(38, 18, 70, 0.08) !important; border-radius: 12px !important; background: rgba(38, 18, 70, 0.02) !important; } body.woocommerce-checkout .biitest-bill-different-toggle label { display: flex !important; align-items: center !important; gap: 12px !important; margin: 0 !important; min-height: 44px !important; font-size: 0.95rem !important; font-weight: 600 !important; color: #4a3a78 !important; cursor: pointer !important; } body.woocommerce-checkout .biitest-bill-different-toggle input[type="checkbox"] { width: 20px !important; height: 20px !important; flex: 0 0 20px !important; margin: 0 !important; cursor: pointer !important; accent-color: #2FA3F2 !important; } body.woocommerce-checkout .biitest-billing-section.is-collapsed { display: none !important; } body.woocommerce-checkout .biitest-billing-section:not(.is-collapsed) { scroll-margin-top: calc(var(--header-h, 109px) + 24px) !important; } body.woocommerce-checkout #ship-to-different-address, body.woocommerce-checkout #ship-to-different-address-checkbox { display: none !important; } /* Order review heading WC tarafından #order_review_heading olarak basılır, yukarıda style'landı. Pseudo-element gereksiz. */ body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table { width: 100% !important; border-collapse: collapse !important; margin: 0 0 4px !important; border: 0 !important; background: transparent !important; } body.woocommerce-checkout .shop_table thead { display: none !important; } body.woocommerce-checkout .shop_table tbody td { padding: 12px 0 !important; border: 0 !important; border-bottom: 1px solid rgba(38, 18, 70, 0.06) !important; font-size: 0.94rem !important; color: #261246 !important; vertical-align: top !important; background: transparent !important; } body.woocommerce-checkout .shop_table .cart_item .product-name { font-weight: 600 !important; color: #261246 !important; } body.woocommerce-checkout .shop_table .cart_item .product-name .product-quantity { display: inline-block !important; background: linear-gradient(135deg, #f0e8fb, #faf5ff) !important; color: #261246 !important; font-weight: 700 !important; font-size: 0.78rem !important; padding: 2px 9px !important; border-radius: 5px !important; margin-left: 8px !important; } body.woocommerce-checkout .shop_table .cart_item .product-total { text-align: right !important; font-weight: 700 !important; white-space: nowrap !important; } body.woocommerce-checkout .shop_table tfoot tr { font-size: 0.94rem !important; } body.woocommerce-checkout .shop_table tfoot th { text-align: left !important; padding: 9px 0 !important; border: 0 !important; color: rgba(38, 18, 70, 0.65) !important; font-weight: 600 !important; background: transparent !important; } body.woocommerce-checkout .shop_table tfoot td { text-align: right !important; padding: 9px 0 !important; border: 0 !important; font-weight: 700 !important; color: #261246 !important; background: transparent !important; } body.woocommerce-checkout .shop_table tfoot tr.order-total th, body.woocommerce-checkout .shop_table tfoot tr.order-total td { font-size: 1.2rem !important; font-weight: 800 !important; padding-top: 14px !important; border-top: 2px solid rgba(38, 18, 70, 0.14) !important; } body.woocommerce-checkout .shop_table tfoot tr.order-total td { color: #d4006c !important; } body.woocommerce-checkout #payment { background: transparent !important; border: 0 !important; padding: 18px 0 0 !important; margin: 14px 0 0 !important; border-top: 1px solid rgba(38, 18, 70, 0.08) !important; } body.woocommerce-checkout #payment ul.payment_methods { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 0 14px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; list-style: none !important; } body.woocommerce-checkout #payment ul.payment_methods li { background: #faf8fd !important; border: 1.5px solid rgba(38, 18, 70, 0.08) !important; border-radius: 10px !important; padding: 14px 16px !important; margin: 0 !important; list-style: none !important; } body.woocommerce-checkout #payment ul.payment_methods li label { font-weight: 600 !important; cursor: pointer !important; color: #261246 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; } body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input[type="radio"] { width: 18px !important; height: 18px !important; accent-color: #2FA3F2 !important; margin: 0 !important; } body.woocommerce-checkout #payment ul.payment_methods li.selected { border-color: #2FA3F2 !important; background: #f0f9ff !important; } body.woocommerce-checkout #payment .payment_box { background: rgba(47, 163, 242, 0.06) !important; border-radius: 8px !important; padding: 12px 14px !important; margin: 10px 0 0 !important; font-size: 0.9rem !important; color: rgba(38, 18, 70, 0.8) !important; border: 0 !important; } body.woocommerce-checkout #payment .payment_box::before { display: none !important; } body.woocommerce-checkout #payment .woocommerce-notice--info, body.woocommerce-checkout #payment .woocommerce-info { background: #fef3c7 !important; border-left: 4px solid #f59e0b !important; color: #92400e !important; border-radius: 8px !important; } body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin: 14px 0 0 !important; font-size: 0.85rem !important; color: rgba(38, 18, 70, 0.7) !important; line-height: 1.5 !important; } body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row { margin: 10px 0 0 !important; } body.woocommerce-checkout #place_order { width: 100% !important; min-height: 60px !important; margin: 18px 0 0 !important; padding: 18px 28px !important; background: linear-gradient(135deg, #261246 0%, #3d1d6e 100%) !important; color: #fff !important; border: 0 !important; border-radius: 12px !important; font-size: 1rem !important; font-weight: 800 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; cursor: pointer !important; box-shadow: 0 8px 20px -8px rgba(38, 18, 70, 0.5) !important; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease !important; } body.woocommerce-checkout #place_order:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 32px -10px rgba(38, 18, 70, 0.6) !important; background: linear-gradient(135deg, #3d1d6e 0%, #261246 100%) !important; } body.woocommerce-checkout #place_order:disabled { opacity: 0.5 !important; cursor: not-allowed !important; } /* Coupon form (toggle ile açıldığında) — input + buton yan yana, temiz */ body.woocommerce-checkout form.checkout_coupon { background: #fff !important; border: 1.5px solid rgba(212, 0, 108, 0.20) !important; border-radius: 12px !important; padding: 16px 18px !important; margin: 0 0 18px !important; display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; gap: 10px !important; box-shadow: 0 2px 12px rgba(212, 0, 108, 0.06) !important; } /* WC bazen

intro text basıyor — gizle */ body.woocommerce-checkout form.checkout_coupon > p:not(.form-row) { display: none !important; } /* Form-row

wrapper'larını flex item yap */ body.woocommerce-checkout form.checkout_coupon p.form-row { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } body.woocommerce-checkout form.checkout_coupon p.form-row-first { flex: 1 1 220px !important; min-width: 0 !important; display: block !important; } body.woocommerce-checkout form.checkout_coupon p.form-row-last { flex: 0 0 auto !important; display: block !important; } body.woocommerce-checkout form.checkout_coupon > .clear { display: none !important; } body.woocommerce-checkout form.checkout_coupon input[type="text"]#coupon_code, body.woocommerce-checkout form.checkout_coupon input[type="text"][name="coupon_code"] { width: 100% !important; min-height: 50px !important; padding: 12px 18px !important; background: #faf8fd !important; border: 1.5px solid rgba(38, 18, 70, 0.12) !important; border-radius: 10px !important; font-size: 0.95rem !important; font-weight: 600 !important; color: #261246 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; box-sizing: border-box !important; } body.woocommerce-checkout form.checkout_coupon input[type="text"]::placeholder { color: rgba(74, 58, 120, 0.4) !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; } body.woocommerce-checkout form.checkout_coupon input[type="text"]:focus { border-color: #d4006c !important; background: #fff !important; outline: none !important; box-shadow: 0 0 0 4px rgba(212, 0, 108, 0.12) !important; } body.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"], body.woocommerce-checkout form.checkout_coupon button.button { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 150px !important; min-height: 50px !important; padding: 12px 28px !important; background: linear-gradient(135deg, #d4006c 0%, #ff3399 100%) !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; font-weight: 800 !important; font-size: 0.9rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; cursor: pointer !important; box-shadow: 0 4px 14px -4px rgba(212, 0, 108, 0.4) !important; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease !important; white-space: nowrap !important; } body.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"]:hover, body.woocommerce-checkout form.checkout_coupon button.button:hover { transform: translateY(-1px) !important; box-shadow: 0 8px 22px -6px rgba(212, 0, 108, 0.55) !important; background: linear-gradient(135deg, #ff3399 0%, #d4006c 100%) !important; } /* Mobile: input + button stacked, both full-width */ @media (max-width: 600px) { body.woocommerce-checkout form.checkout_coupon { flex-direction: column !important; padding: 14px !important; } body.woocommerce-checkout form.checkout_coupon p.form-row-first, body.woocommerce-checkout form.checkout_coupon p.form-row-last { flex: 1 1 100% !important; width: 100% !important; } body.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"], body.woocommerce-checkout form.checkout_coupon button.button { width: 100% !important; min-width: 0 !important; } } @media (max-width: 980px) { body.woocommerce-checkout .page-article { padding-top: calc(var(--header-h, 109px) + 16px) !important; } body.woocommerce-checkout form.checkout { grid-template-columns: 1fr !important; gap: 16px !important; } body.woocommerce-checkout #order_review { position: static !important; grid-column: 1 / -1 !important; order: -1 !important; padding: 22px !important; border-radius: 14px !important; } body.woocommerce-checkout #customer_details { grid-column: 1 / -1 !important; } body.woocommerce-checkout .woocommerce-billing-fields, body.woocommerce-checkout .woocommerce-shipping-fields, body.woocommerce-checkout .woocommerce-additional-fields, body.woocommerce-checkout .biitest-checkout-delivery, body.woocommerce-checkout .biitest-billing-section { padding: 22px 20px !important; border-radius: 14px !important; } body.woocommerce-checkout .biitest-checkout-contact, body.woocommerce-checkout .biitest-checkout-invoice-meta { padding: 0 0 14px !important; margin: 0 0 14px !important; } body.woocommerce-checkout .biitest-checkout-delivery .form-row.form-row-first, body.woocommerce-checkout .biitest-checkout-delivery .form-row.form-row-last, body.woocommerce-checkout .biitest-checkout-delivery .form-row.whoop-row-third-1, body.woocommerce-checkout .biitest-checkout-delivery .form-row.whoop-row-third-2, body.woocommerce-checkout .biitest-checkout-delivery .form-row.whoop-row-third-3 { grid-column: 1 / 13 !important; } body.woocommerce-checkout .biitest-bill-different-toggle { padding: 12px 16px !important; } body.woocommerce-checkout .form-row.form-row-first, body.woocommerce-checkout .form-row.form-row-last { grid-column: 1 / 13 !important; } body.woocommerce-checkout .form-row.whoop-row-third-1, body.woocommerce-checkout .form-row.whoop-row-third-2, body.woocommerce-checkout .form-row.whoop-row-third-3 { grid-column: span 4 !important; } } @media (max-width: 480px) { body.woocommerce-checkout .form-row.whoop-row-third-1, body.woocommerce-checkout .form-row.whoop-row-third-2, body.woocommerce-checkout .form-row.whoop-row-third-3 { grid-column: 1 / 13 !important; } body.woocommerce-checkout .woocommerce-billing-fields, body.woocommerce-checkout .woocommerce-shipping-fields, body.woocommerce-checkout .biitest-checkout-delivery, body.woocommerce-checkout .biitest-billing-section { padding: 18px 16px !important; } body.woocommerce-checkout .form-row input.input-text, body.woocommerce-checkout .form-row select { min-height: 50px !important; font-size: 16px !important; } } /* ========================================================= * INLINE COUPON — sipariş özeti içinde, her zaman görünür * Stripe / Shopify pattern: küçük link + collapsible input * ========================================================= */ .biitest-coupon-inline { margin: 12px 0 0 !important; padding: 14px 0 0 !important; border-top: 1px dashed rgba(38, 18, 70, 0.14) !important; } .biitest-coupon-form { margin: 0 !important; } .biitest-coupon-label { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 0.85rem !important; font-weight: 700 !important; color: #d4006c !important; margin: 0 0 10px !important; cursor: pointer !important; } .biitest-coupon-label svg { color: #d4006c !important; } .biitest-coupon-row { display: flex !important; gap: 8px !important; align-items: stretch !important; } .biitest-coupon-row input[type="text"] { flex: 1 1 auto !important; min-width: 0 !important; min-height: 44px !important; padding: 10px 14px !important; background: #fff !important; border: 1.5px solid rgba(38, 18, 70, 0.12) !important; border-radius: 8px !important; font-family: inherit !important; font-size: 0.9rem !important; font-weight: 600 !important; color: #261246 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; box-sizing: border-box !important; transition: border-color 0.15s ease, box-shadow 0.15s ease !important; } .biitest-coupon-row input[type="text"]::placeholder { color: rgba(74, 58, 120, 0.4) !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; } .biitest-coupon-row input[type="text"]:focus { border-color: #d4006c !important; outline: none !important; box-shadow: 0 0 0 3px rgba(212, 0, 108, 0.12) !important; } .biitest-coupon-apply { flex: 0 0 auto !important; min-height: 44px !important; padding: 0 18px !important; background: #261246 !important; color: #fff !important; border: 0 !important; border-radius: 8px !important; font-family: inherit !important; font-size: 0.85rem !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; cursor: pointer !important; transition: background 0.15s ease, transform 0.15s ease !important; white-space: nowrap !important; } .biitest-coupon-apply:hover { background: linear-gradient(135deg, #d4006c 0%, #ff3399 100%) !important; transform: translateY(-1px) !important; } .biitest-coupon-apply:disabled { opacity: 0.6 !important; cursor: wait !important; transform: none !important; } /* Applied coupon chips */ .biitest-coupon-applied-list { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin: 0 0 10px !important; } .biitest-coupon-chip { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: linear-gradient(135deg, #16a34a, #22c55e) !important; color: #fff !important; padding: 5px 4px 5px 10px !important; border-radius: 6px !important; font-size: 0.78rem !important; font-weight: 800 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; } .biitest-coupon-chip svg { flex: 0 0 12px; } .biitest-coupon-remove { background: rgba(255, 255, 255, 0.25) !important; color: #fff !important; border: 0 !important; width: 18px !important; height: 18px !important; border-radius: 4px !important; font-size: 14px !important; line-height: 1 !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; transition: background 0.15s ease !important; } .biitest-coupon-remove:hover { background: rgba(255, 255, 255, 0.45) !important; } /* Coupon feedback message */ .biitest-coupon-message { margin: 8px 0 0 !important; font-size: 0.8rem !important; font-weight: 600 !important; min-height: 16px !important; } .biitest-coupon-message.is-success { color: #16a34a !important; } .biitest-coupon-message.is-error { color: #d4006c !important; }