/** * RAI25 Shop — shared base rules for the 4 zones (shop, product, cart, account). */ .rai-shop, .rai-product, .rai-cart, .rai-account { color: var(--rai-color-text); font-size: var(--rai-font-size-base); line-height: 1.5; } .rai-shop img, .rai-product img, .rai-cart img { max-width: 100%; height: auto; border-radius: var(--rai-radius-sm); } /* * !important on color/background/border/typography only (never on layout * properties like display/padding/gap): WooCommerce adds a "woocommerce" * class to on every shop page, so Oxygen's site-wide "Woo Global * Styler" (targeting native selectors such as .woocommerce a.button.alt, * .woocommerce table.shop_table th...) keeps applying here even though the * old Oxygen elements were removed. Those Oxygen selectors are more * specific than a plain zone-scoped class, so without !important they * would keep winning regardless of stylesheet load order. */ .rai-shop .button, .rai-product .button, .rai-cart .button, .rai-account .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--rai-space-2); padding: var(--rai-space-2) var(--rai-space-4); border-radius: var(--rai-radius-md) !important; background: var(--rai-color-primary) !important; color: #fff !important; font-weight: 600; border: none !important; cursor: pointer; transition: background-color 0.15s ease, transform 0.1s ease; } .rai-shop .button:hover, .rai-product .button:hover, .rai-cart .button:hover, .rai-account .button:hover { background: var(--rai-color-primary-hover) !important; } .rai-shop .button:active, .rai-product .button:active, .rai-cart .button:active, .rai-account .button:active { transform: scale(0.98); } .rai-shop .price, .rai-product .price { font-weight: 700; color: var(--rai-color-text) !important; } .rai-shop .price del, .rai-product .price del { color: var(--rai-color-text-muted) !important; font-weight: 400; opacity: 0.7; } .rai-shop .price ins, .rai-product .price ins { text-decoration: none; color: var(--rai-color-primary) !important; } .rai-shop .onsale, .rai-product .onsale { background: var(--rai-color-primary) !important; color: #fff !important; border-radius: var(--rai-radius-sm); padding: var(--rai-space-1) var(--rai-space-2); font-size: var(--rai-font-size-sm); font-weight: 700; } .rai-qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--rai-color-border); border-radius: var(--rai-radius-sm); overflow: hidden; } .rai-qty-stepper input.qty { width: 3rem; border: none; text-align: center; padding: var(--rai-space-1); } .rai-qty-stepper__btn { border: none; background: var(--rai-color-surface-alt); width: 2rem; height: 2rem; cursor: pointer; font-weight: 700; } .rai-qty-stepper__btn:hover { background: var(--rai-color-border); }