/* ---------- 20. WooCommerce (Cart / Checkout / My Account) Classic shortcode-based templates ([woocommerce_cart] / [woocommerce_checkout]), restyled to match the rest of the site instead of WooCommerce's default look. ---------- */ .woocommerce { font-size: 0.95rem; color: var(--c-text); /* WooCommerce's own stylesheet reads these custom properties for form fields, cards, and status colors — overriding them here means our theme flows through WC's default CSS instead of fighting its higher-specificity selectors rule-by-rule. */ --wc-form-color-background: rgba(255, 255, 255, 0.04); --wc-form-color-text: var(--c-text); --wc-form-border-color: rgba(255, 255, 255, 0.1); --wc-content-bg: transparent; --wc-primary: var(--c-gold-400); --wc-primary-text: var(--c-black); --wc-secondary: rgba(255, 255, 255, 0.06); --wc-secondary-text: var(--c-text); --wc-green: var(--c-success); --wc-red: var(--c-error); } /* WooCommerce adds a ".woocommerce" class to itself on shop/product/ cart/checkout/account pages (not just to its own shortcode wrapper div), so an unscoped ".woocommerce a" matches every link on the page — including the header/footer nav (outside any WooCommerce-rendered markup, but still descendants of that body), breadcrumbs (which should stay the same muted color everywhere, not just gold on WooCommerce pages), every button styled via .btn/.button (which already set their own text color — e.g. black on the gold pill buttons — and must not get overridden to gold), and product cards (shop grid / related products — their title and other links have their own deliberate colors). This is meant for plain prose links only — e.g. text inside cart/checkout notes, tab content, my-account pages — so exclude all of the above. */ .woocommerce a:not(.site-header a):not(.site-footer a):not(.mobile-nav a):not(.breadcrumb a):not(.woocommerce-breadcrumb a):not(.btn):not(.button):not(.product-card a):not(.woocommerce-tabs a):not(.cr-cart-item a):not(.cr-account-nav__link):not(.cr-address-card__edit) { color: var(--c-gold-300); } .woocommerce a:not(.site-header a):not(.site-footer a):not(.mobile-nav a):not(.breadcrumb a):not(.woocommerce-breadcrumb a):not(.btn):not(.button):not(.product-card a):not(.woocommerce-tabs a):not(.cr-cart-item a):not(.cr-account-nav__link):not(.cr-address-card__edit):hover { color: var(--c-gold-100); } /* Notices — WooCommerce's icon font glyph is dropped; it doesn't exist anywhere else in this theme's visual language. */ .woocommerce-error, .woocommerce-message, .woocommerce-info { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; list-style: none; margin: 0 0 var(--sp-3); padding: 1rem 1.5rem; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-left: 3px solid var(--c-gold-400); color: var(--c-text); } .woocommerce-error::before, .woocommerce-message::before, .woocommerce-info::before { display: none; } .woocommerce-error { border-left-color: var(--c-error); } .woocommerce-message { border-left-color: var(--c-success); } .woocommerce-error a.button, .woocommerce-message a.button { order: 2; } /* Below ~480px the "View cart"/"Continue shopping" button reliably no longer fits next to the message text on the same flex line, so it wraps — but flexbox wraps it to wherever the previous line's leftover space put it, not flush to the container's left edge, reading as a stray floating button with a "random" indent. Forcing a column stack once that wrap is inevitable keeps the button predictably full-width and flush below the text instead. */ @media (max-width: 480px) { .woocommerce-error, .woocommerce-message, .woocommerce-info { flex-direction: column; align-items: stretch; } .woocommerce-error a.button, .woocommerce-message a.button { margin: 0; text-align: center; } } .cr-repurchase-warning { display: none !important; flex-direction: column; align-items: flex-start; gap: 0.6rem; } .cr-repurchase-warning.is-visible { display: flex !important; } .cr-repurchase-warning__text { margin: 0; } .cr-repurchase-warning__check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; cursor: pointer; } /* Tables: cart, cart totals, order review */ .woocommerce table.shop_table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-4); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--r-lg); overflow: hidden; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); text-align: left; vertical-align: middle; } .woocommerce table.shop_table thead th { font-family: var(--font-display); font-weight: 600; color: var(--c-text-dim); background: rgba(255, 255, 255, 0.03); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.04em; } .woocommerce table.shop_table tr:last-child td { border-bottom: none; } .woocommerce table.shop_table .product-thumbnail, .woocommerce table.shop_table th.product-thumbnail { display: none; } .woocommerce table.shop_table .product-name dl.variation { margin-top: 0.5rem; font-size: 0.85rem; color: var(--c-text-dim); } .woocommerce table.shop_table .product-name dl.variation dt { display: inline; font-weight: 600; color: var(--c-text-mute); } .woocommerce table.shop_table .product-name dl.variation dd { display: inline; margin: 0 0 0 0.3rem; } .woocommerce table.shop_table .product-name dl.variation dd::after { content: ""; display: block; } .woocommerce table.shop_table .product-name dl.variation dd p { display: inline; } .woocommerce .amount { color: var(--c-gold-300); font-weight: 600; } .woocommerce-checkout-review-order-table .amount { font-family: var(--font-display); font-size: 1.3rem; } .woocommerce table.shop_table tr.order-total .amount { font-family: var(--font-display); font-size: 1.3rem; } .woocommerce .cart-collaterals .cart_totals, .woocommerce #payment, .woocommerce ul.order_details { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--r-lg); padding: 1.5rem; } .woocommerce .cart_totals h2, .woocommerce-checkout #order_review_heading { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 1rem; color: var(--c-text); } /* Buttons — excludes .product-card, which has its own primary/secondary button treatment (gold "Add to cart" vs ghost "Select options"/"Read more") that this generic gold-pill rule would otherwise always win on a specificity tie (same specificity, but defined later in this file). */ .woocommerce a.button:not(.product-card a), .woocommerce button.button:not(.product-card button), .woocommerce input.button:not(.product-card input), .woocommerce #place_order { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.95rem 1.6rem; border-radius: var(--r-pill); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; background: var(--c-gold-400); color: var(--c-black); border: none; transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); } .woocommerce a.button:not(.product-card a):hover, .woocommerce button.button:not(.product-card button):hover, .woocommerce input.button:not(.product-card input):hover, .woocommerce #place_order:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -16px rgba(230, 181, 74, 0.7); color: var(--c-black); } .woocommerce table.shop_table .button[name="update_cart"], .woocommerce table.shop_table .button[name="apply_coupon"] { --btn-bg: transparent; background: transparent; color: var(--c-text); border: 1px solid rgba(255, 255, 255, 0.18); } .woocommerce .wc-proceed-to-checkout .checkout-button { width: 100%; padding: 1.15rem 2.2rem; font-size: 1.05rem; } /* Forms: billing fields, coupon field, order notes */ .woocommerce form .form-row { margin: 0 0 1.1rem; } .woocommerce form .form-row label { display: block; font-size: 0.82rem; font-weight: 500; color: var(--c-text-dim); letter-spacing: 0.02em; margin-bottom: 0.4rem; } .woocommerce form .form-row .required { color: var(--c-gold-400); text-decoration: none; } .woocommerce form .form-row .input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea, .woocommerce #coupon_code { width: 100%; padding: 0.85rem 1rem; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--c-text); font-family: inherit; font-size: 0.95rem; transition: border-color var(--t-fast), background var(--t-fast); } .woocommerce form .form-row .input-text:focus, .woocommerce form .form-row select:focus, .woocommerce form .form-row textarea:focus, .woocommerce #coupon_code:focus { outline: none; border-color: var(--c-gold-400); background: rgba(230, 181, 74, 0.04); } .woocommerce-billing-fields h3, .woocommerce-additional-fields h3 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 1rem; color: var(--c-text); } /* Payment methods */ .woocommerce ul.payment_methods { list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 1.25rem; } .woocommerce ul.payment_methods li { padding: 0.75rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .woocommerce ul.payment_methods li img { display: inline-block; vertical-align: middle; margin-left: 0.5rem; } .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box, #add_payment_method #payment div.payment_box { margin-top: 0.75rem; padding: 1rem; background: rgba(255, 255, 255, 0.04); border-radius: var(--r-md); font-size: 0.88rem; color: var(--c-text-dim); } .woocommerce div.payment_box::before { display: none; } /* My Account — sidebar + content grid, only when the nav is actually present (i.e. the customer is logged in); logged out, the shortcode renders just the login form with no nav, and this stays a single column. */ body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-5); align-items: start; } /* WooCommerce's own woocommerce.css gives every .woocommerce element a :before/:after clearfix (content:"", display:table) for its legacy float-based layout. A `display` other than none makes generated content count as a real (anonymous) grid item once we turn this element into a grid container above — two invisible 0-height rows land before/after the real ones, and this rule's own row-gap then applies around THEM too, adding a stray 48px gap above the nav that had nothing to do with any visible content. */ body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::before, body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::after { display: none; } /* WooCommerce's own woocommerce-layout.css ships ".woocommerce-account .woocommerce-MyAccount-navigation/-content {float:...;width:30%/68%}" for themes without proper account-page support — 2 class selectors, same as a plain ".cr-account-nav" would need to beat and win purely on source order. Matching it here with 3 class selectors instead (body class + 2 classes on the element) wins outright regardless of stylesheet order. */ body.woocommerce-account .woocommerce-MyAccount-navigation.cr-account-nav { float: none; width: auto; /* Auto-placement alone (relying on DOM order — nav first, content second — to land in column 1/2 respectively) was observed landing nav in column 2 and content in column 1 instead, cause unconfirmed; pinning both explicitly sidesteps it regardless of cause. */ grid-column: 1; grid-row: 1; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-md); padding: 0.6rem; position: sticky; top: calc((var(--header-h, 0px) + var(--admin-bar-h)) + 1.25rem); } body.woocommerce-account .woocommerce-MyAccount-content.cr-account-content { float: none; width: auto; max-width: 100%; min-width: 0; grid-column: 2; grid-row: 1; } .cr-account-nav ul { display: flex; flex-direction: column; gap: 0.2rem; list-style: none; margin: 0; padding: 0; } .cr-account-nav li { width: 100%; } .cr-account-nav__link { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.75rem 0.9rem; border-radius: var(--r-sm); font-size: 0.9rem; color: var(--c-text-mute); transition: color var(--t-fast), background var(--t-fast); } .cr-account-nav__icon { flex: none; color: currentColor; } .cr-account-nav__link:hover { color: var(--c-text); background: rgba(255, 255, 255, 0.04); } .woocommerce-MyAccount-navigation-link.is-active .cr-account-nav__link { background: rgba(230, 181, 74, 0.1); color: var(--c-gold-300); font-weight: 600; } .cr-account-nav__link--logout { color: var(--c-error); } .cr-account-nav__link--logout:hover { color: var(--c-error); background: rgba(255, 84, 112, 0.08); } @media (max-width: 900px) { body.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; } /* Single column now — both explicit grid-column pins above would otherwise still ask for a 2nd column that no longer exists. Both are also still pinned to grid-row:1 (needed to sit side by side on desktop) — left alone, that stacks nav and content in the exact same cell here instead of one above the other. */ body.woocommerce-account .woocommerce-MyAccount-navigation.cr-account-nav, body.woocommerce-account .woocommerce-MyAccount-content.cr-account-content { grid-column: 1; grid-row: auto; } /* .cr-account-nav alone can't beat the desktop rule's "body.woocommerce-account .woocommerce-MyAccount-navigation.cr-account-nav" (1 element + 3 classes) — position:sticky was winning here regardless of this media query, riding up over the welcome/dashboard content on scroll instead of sitting in normal flow above it. */ body.woocommerce-account .woocommerce-MyAccount-navigation.cr-account-nav { position: static; overflow-x: auto; } .cr-account-nav ul { flex-direction: row; } .cr-account-nav__link { white-space: nowrap; } .cr-account-nav__link--logout { display: none; } } /* Login / Register (My Account, logged out) */ #customer_login.u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); list-style: none; margin: 0; } #customer_login .u-column1, #customer_login .u-column2, .woocommerce-MyAccount-content > form.woocommerce-form-login { float: none; width: 100%; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--r-lg); padding: 1.75rem; } #customer_login .u-column1 { grid-column: 1; grid-row: 1; } #customer_login .u-column2 { grid-column: 2; grid-row: 1; } #customer_login h2 { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 1.25rem; color: var(--c-text); } .woocommerce-form-login p.form-row:has(button[type="submit"]), .woocommerce-form-register p.form-row:has(button[type="submit"]) { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 0; } .woocommerce form.login, .woocommerce form.register { border: none; } .woocommerce-form-login p.form-row:has(button[type="submit"])::before, .woocommerce-form-login p.form-row:has(button[type="submit"])::after, .woocommerce-form-register p.form-row:has(button[type="submit"])::before, .woocommerce-form-register p.form-row:has(button[type="submit"])::after { display: none; } .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--c-text-dim); margin: 0; } .woocommerce-form-login__rememberme input { width: auto; } .woocommerce-form-register p.form-row:has(button[type="submit"]) .woocommerce-form-register__submit { width: 100%; } .woocommerce-LostPassword { margin-top: 1.25rem; font-size: 0.85rem; color: var(--c-text-mute); } @media (max-width: 900px) { #customer_login.u-columns { grid-template-columns: 1fr; } } @media (max-width: 700px) { .woocommerce table.shop_table_responsive tr:not(:first-child) { border-top: 1px solid rgba(255, 255, 255, 0.1); } .woocommerce table.shop_table_responsive td::before { color: var(--c-text-mute); font-weight: 600; } } /* Checkout: main column (billing + payment) + order-summary sidebar */ .cr-checkout { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-5); align-items: start; } /* On a failed submit (e.g. the terms checkbox left unticked), WooCommerce's checkout.js prepends the error notice as the FIRST CHILD of form.checkout itself — not before the form, the way wc_print_notices() renders the page-load notices. Since .cr-checkout is a grid container, that notice would otherwise become a third grid item and get squeezed into a column instead of spanning as a banner above both. */ .cr-checkout > .woocommerce-NoticeGroup-checkout, .cr-checkout > .woocommerce-error, .cr-checkout > .woocommerce-message { grid-column: 1 / -1; } .cr-checkout__sidebar { position: sticky; top: calc((var(--header-h) + var(--admin-bar-h)) + var(--sp-3)); } .cr-checkout__heading { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 1rem; color: var(--c-text); } .cr-checkout__heading-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .cr-checkout__heading-row .cr-checkout__heading { margin-bottom: 1rem; } .cr-checkout__clear-cart { margin-bottom: 1rem; font-size: 0.82rem; color: var(--c-text-mute); text-decoration: underline; } .cr-checkout__clear-cart:hover { color: var(--c-error); } /* Gift certificate coupon card — moved into the checkout sidebar, under the order review table (see cr_wc_* hook move in inc/woocommerce-certificates.php), styled as its own small card to match #payment / .cart_totals in the main column rather than WooCommerce's plain click-to-reveal notice. */ .cr-coupon-card { margin-top: var(--sp-3); padding: 1.25rem 1.5rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--r-lg); } .cr-coupon-card__label { display: block; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--c-text-dim); margin-bottom: 0.75rem; } .cr-coupon-form { width: 100%; } .cr-coupon-form.processing { opacity: 0.6; pointer-events: none; } .cr-coupon-row { display: flex; gap: 0.6rem; width: 100%; margin-bottom: 0 !important; } .cr-coupon-row .input-text { flex: 1; min-width: 0; } /* Same look/hover/shimmer as .btn--ghost (see §5 Buttons) — not the generic gold-fill WooCommerce gives any button.button. That generic rule (.woocommerce button.button:not(.product-card button)) ties with this one on class-count specificity but wins on element-count (its :not() argument's "button" type selector), so border/padding/font-size need !important here too, the same as background/color already did — without it those three quietly lose the tie-break even though background/color visibly don't. */ .cr-checkout__sidebar .cr-coupon-row .button, .cr-cart-form .cr-coupon-row .button { flex: none; padding: 0.7rem 1.3rem !important; font-size: 0.85rem !important; margin-bottom: 0; background: transparent !important; color: var(--c-text) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; position: relative; overflow: hidden; isolation: isolate; transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), border-color var(--t-fast); } .cr-checkout__sidebar .cr-coupon-row .button::before, .cr-cart-form .cr-coupon-row .button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: translateX(-120%); transition: transform var(--t-slow) var(--ease-out); z-index: -1; } .cr-checkout__sidebar .cr-coupon-row .button:hover, .cr-cart-form .cr-coupon-row .button:hover { background: transparent !important; color: var(--c-text) !important; border-color: var(--c-gold-400) !important; box-shadow: var(--sh-glow-gold) !important; transform: translateY(-3px); } .cr-checkout__sidebar .cr-coupon-row .button:hover::before, .cr-cart-form .cr-coupon-row .button:hover::before { transform: translateX(120%); } @media (max-width: 900px) { .cr-checkout { grid-template-columns: 1fr; } .cr-checkout__sidebar { position: static; order: -1; } /* WooCommerce's own ".woocommerce form .form-row{padding:3px}" (unscoped, every form-row sitewide) otherwise insets the coupon input/button a few pixels from the card edges the label above it lines up with. !important: that selector's extra "form" element out-specifies a plain ".form-row.cr-coupon-row" by element count despite the tie on class count. */ .form-row.cr-coupon-row { padding: 0 !important; } /* WooCommerce's own ".form-row" clearfix (content:" "; display:table on ::before/::after) is a float-layout leftover — .cr-coupon-row is display:flex, which needs no clearfix, but the pseudo-elements still render as flex items with their own line box, adding space before the input row and after the button. */ .form-row.cr-coupon-row::before, .form-row.cr-coupon-row::after { content: none !important; } /* WooCommerce floats these 47%-ish side by side (see First/Last name) — fine with a wide sidebar column, cramped once checkout collapses to a single narrow column here. !important: WooCommerce's own ".woocommerce form .form-row-first" (extra "form" element selector) otherwise out-specifies this by element count despite the tie on class count. */ .woocommerce-billing-fields .form-row-first, .woocommerce-billing-fields .form-row-last { width: 100% !important; float: none !important; } } /* ---------- Cart page — mirrors .cr-checkout's main-column + sticky-sidebar split. See woocommerce/cart/cart.php, cart/cart-empty.php, cart/cross-sells.php and inc/woocommerce-cart.php. ---------- */ .cr-cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--sp-5); align-items: start; } /* .cr-cart-main wraps the actions row + item list as a single grid item — NOT grid-template-areas with .cr-cart-sidebar spanning both of that column's rows, which was tried first: a spanning item forces the grid to distribute its full height across every row it spans, so a short actions row paired with a tall sidebar (e.g. only one cart item) left a huge dead gap between the actions row and the item list. A plain wrapper sidesteps that entirely — the main column's own height is just its natural content height, independent of the sidebar's. */ .cr-cart-main { min-width: 0; } .cr-cart-actions-row { margin-bottom: var(--sp-4); } .cr-cart-sidebar { position: sticky; top: calc((var(--header-h) + var(--admin-bar-h)) + var(--sp-3)); } /* Free-shipping progress bar */ .cr-ship-bar { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--r-md); padding: 1rem 1.25rem; margin-bottom: var(--sp-3); } .cr-ship-bar__msg { font-size: 0.85rem; color: var(--c-text-dim); margin-bottom: 0.6rem; } .cr-ship-bar__msg strong { color: var(--c-gold-300); } .cr-ship-bar__track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; } .cr-ship-bar__fill { height: 100%; background: linear-gradient(90deg, var(--c-gold-500), var(--c-gold-300)); transition: width var(--t-med) var(--ease-out); } /* Item rows — thumb/icon | name+meta | qty | price | remove */ .cart-items-list { display: flex; flex-direction: column; } .cr-cart-item { display: grid; grid-template-columns: 76px 1fr auto auto auto; align-items: center; gap: var(--sp-3); padding: 1.25rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .cr-cart-item:first-child { padding-top: 0; } .cr-cart-item:last-child { border-bottom: none; } .cr-cart-item__media { width: 76px; height: 76px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; } .cr-cart-item__media img { width: 100%; height: 100%; object-fit: cover; } .cr-cart-item__icon { display: flex; color: var(--c-gold-300); } .cr-cart-item__type { display: block; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-gold-400); font-weight: 700; margin-bottom: 0.25rem; } .cr-cart-item__name { font-size: 0.98rem; font-weight: 500; color: var(--c-text); } .cr-cart-item__name a { color: var(--c-text); } .cr-cart-item__name a:hover { color: var(--c-gold-300); } .cr-cart-item__meta:empty { display: none; } /* wc_get_formatted_cart_item_data() output (Room/Date/Time/Players etc. — see the woocommerce_get_item_data filters in inc/woocommerce-booking.php, inc/woocommerce-birthday.php, inc/woocommerce-cart.php). Mirrors .woocommerce table.shop_table .product-name dl.variation, which doesn't reach this markup since the cart is no longer a . */ .cr-cart-item__meta dl.variation { margin-top: 0.35rem; font-size: 0.83rem; color: var(--c-text-dim); } .cr-cart-item__meta dl.variation dt { display: inline; font-weight: 600; color: var(--c-text-mute); } .cr-cart-item__meta dl.variation dd { display: inline; margin: 0 0 0 0.3rem; } .cr-cart-item__meta dl.variation dd::after { content: ""; display: block; } .cr-cart-item__meta dl.variation dd p { display: inline; } .cr-cart-item__qty-fixed { font-size: 0.85rem; color: var(--c-text-mute); white-space: nowrap; } .cr-cart-item__price { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; white-space: nowrap; text-align: right; min-width: 70px; } /* Every other price on the page (ship-bar threshold, order-summary subtotal/discount/total, coupon amount) — all rendered via wc_price(), which always wraps in a .woocommerce-Price-amount.amount span. */ .cr-cart-form .amount { font-family: var(--font-display); font-size: 1.3rem; } .cr-cart-item .product-remove { display: flex; } .cr-cart-item .product-remove a.remove { width: 32px; height: 32px; border-radius: 50%; border: 1px solid transparent; color: var(--c-text-mute); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; line-height: 1; } .cr-cart-item .product-remove a.remove:hover { color: var(--c-error); border-color: rgba(255, 84, 112, 0.3); background: none; } .cr-cart-actions-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); } .cr-continue-shopping { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--c-text-dim); margin-top: var(--sp-4); } .cr-continue-shopping:hover { color: var(--c-gold-300); } .cr-cart-actions-row .cr-checkout__clear-cart { margin-top: var(--sp-4); margin-bottom: 0; } /* Order summary sidebar — restyles WooCommerce's default .cart_totals table (kept as a real

for its dynamic shipping/tax/coupon rows, see woocommerce/templates/cart/cart-totals.php, not overridden) into flat rows instead of a bordered grid. Card treatment matches the mockup's .summary-panel (and this site's own #payment / ul.order_details boxes) — needed explicitly here because the generic ".woocommerce .cart-collaterals .cart_totals" rule stops matching once cart.php renders this box inside .cr-cart-sidebar instead of .cart-collaterals (see inc/woocommerce-cart.php). */ .cr-cart-sidebar .cart_totals { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--r-lg); padding: 1.5rem; } .cr-cart-sidebar .cart_totals table.shop_table { background: none; border: none; margin-bottom: 0; } .cr-cart-sidebar .cart_totals table.shop_table tr { display: flex; justify-content: space-between; } .cr-cart-sidebar .cart_totals table.shop_table th, .cr-cart-sidebar .cart_totals table.shop_table td { padding: 0.5rem 0; border: none; font-size: 0.88rem; color: var(--c-text-dim); } .cr-cart-sidebar .cart_totals table.shop_table th { font-family: inherit; text-transform: none; background: none; font-weight: 400; letter-spacing: normal; } .cr-cart-sidebar .cart_totals table.shop_table tr.cart-discount th, .cr-cart-sidebar .cart_totals table.shop_table tr.cart-discount td { color: var(--c-gold-300); } .cr-cart-sidebar .cart_totals table.shop_table tr.order-total { margin-top: 0.4rem; border-top: 1px dashed rgba(255, 255, 255, 0.16); } .cr-cart-sidebar .cart_totals table.shop_table tr.order-total th, .cr-cart-sidebar .cart_totals table.shop_table tr.order-total td { color: var(--c-text); font-weight: 700; padding-top: 0.75rem; } /* Coupon/gift-certificate row — injected right above the Total row via cr_render_cart_totals_coupon_row() in inc/woocommerce-cart.php, so it sits inside the order-summary card rather than as its own block under the item list. Breaks out of the flex/space-between row treatment above (a single full-width cell, not two columns). */ .cr-cart-sidebar .cart_totals table.shop_table tr.cr-coupon-tr { display: block; } .cr-cart-sidebar .cart_totals table.shop_table tr.cr-coupon-tr td { display: block; padding: 0; /* WooCommerce's table.shop_table_responsive gives every block-level td a ::before showing attr(data-title) + ": " (its own mobile label pattern, floated left) and right-aligns the td's real content — this td never sets data-title, so that ::before renders as a bare floating ": " with the actual label pushed to the right behind it. !important: that rule (woocommerce-smallscreen.css) sets text-align with !important itself. */ text-align: left !important; } .cr-cart-sidebar .cart_totals table.shop_table tr.cr-coupon-tr td::before { content: none; } /* Plain, not its own nested card — the shared .cr-coupon-card box look (background/border/padding, see the checkout-sidebar rule above) reads as a "box inside a box" once it's already sitting inside the order- summary card itself, so it's stripped back down to bare label + row here specifically. */ .cr-cart-sidebar .cr-coupon-card { margin: var(--sp-2) 0; padding: 0; background: none; border: none; border-radius: 0; } /* Checkout's order-review table isn't restyled row-by-row like the cart summary above — it keeps the sitewide .woocommerce table.shop_table per-row divider (border-bottom on every th/td), which otherwise leaves a stray line directly above the bolded Total row. WooCommerce's own woocommerce.css also sets a full border (all 4 sides, including top) on plain "table.shop_table td" and specifically "tbody th" — a leftover from its default unstyled table look — which without this reset shows up as a stray line above "Total" on both the cart summary and the checkout order review (the one row using a

for its label). */ .woocommerce-checkout-review-order-table tr:has(+ tr.order-total) td, .woocommerce-checkout-review-order-table tr:has(+ tr.order-total) th, .woocommerce-checkout-review-order-table tbody th, .woocommerce-checkout-review-order-table tr.order-total td { border: none; } /* Unscoped (not just .cr-cart-sidebar) — the checkout page's order-review coupon row lives in .cr-checkout__sidebar, a different container, and needs the same breathing room next to the discount amount. */ .woocommerce-remove-coupon { margin-left: 1rem; } .cr-cart-sidebar .wc-proceed-to-checkout { margin-top: 1.25rem; } /* WooCommerce's own woocommerce.css gives any ".button.alt" (which wc_get_proceed_to_checkout_button() renders as) a purple hover fill of its own — higher specificity than our generic ".woocommerce a.button:not(.product-card a):hover" gold-lift treatment can consistently beat, so it's pinned down explicitly here instead. */ .wc-proceed-to-checkout .checkout-button.button.alt:hover { background: var(--c-gold-400) !important; color: var(--c-black) !important; transform: translateY(-3px); box-shadow: 0 18px 40px -16px rgba(230, 181, 74, 0.7); } /* Same diagonal shimmer sweep as .btn/.cr-coupon-row .button on hover. !important on overflow: WooCommerce's own a.button rule also sets overflow (to visible) with higher specificity despite its :where() wrapper, otherwise winning the tie and leaving the sweep gradient unclipped off to the button's left at rest. */ .wc-proceed-to-checkout .checkout-button { position: relative; overflow: hidden !important; isolation: isolate; } .wc-proceed-to-checkout .checkout-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: translateX(-120%); transition: transform var(--t-slow) var(--ease-out); z-index: -1; } .wc-proceed-to-checkout .checkout-button:hover::before { transform: translateX(120%); } .cr-cart-secure { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.78rem; color: var(--c-text-mute); margin-top: 1rem; } .cr-cart-secure .icon { color: var(--c-gold-400); } .cr-cart-pay-methods { font-size: 0.72rem; color: var(--c-text-mute); text-align: center; margin-top: 0.4rem; } /* Empty cart */ .cr-cart-empty { text-align: center; padding: 5rem 1rem; } .cr-cart-empty__icon { width: 84px; height: 84px; border-radius: 50%; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; color: var(--c-text-mute); } .cr-cart-empty h2 { font-family: var(--font-display); font-size: 1.6rem; margin: 0 0 0.6rem; } .cr-cart-empty p { color: var(--c-text-dim); font-size: 0.95rem; margin: 0 0 1.5rem; } @media (max-width: 900px) { .cr-cart-layout { grid-template-columns: 1fr; } .cr-cart-sidebar { position: static; } } @media (max-width: 640px) { .cr-cart-item { grid-template-columns: 60px 1fr; grid-template-areas: "media info" "media qty" "media price"; row-gap: 0.6rem; /* The base rule centers items vertically, which reads fine once media/info/qty/price sit side by side in one row (desktop) — but here "media" spans all 3 stacked rows while "info"/"qty"/"price" are each much shorter, so a centered image floats toward the middle of that combined span instead of lining up with the product name at the top. */ align-items: start; position: relative; padding-right: 2.25rem; } .cr-cart-item__media { grid-area: media; width: 60px; height: 60px; } .cr-cart-item__info { grid-area: info; } .cr-cart-item__qty { grid-area: qty; } /* .cr-qty-stepper is a block-level flex container (display:flex, not inline-flex) with no width of its own — fine on desktop, where its grid column is auto-sized to its content, but here it shares the same 1fr column as the product name/meta, so it was stretching to that column's full width instead of staying pill-sized. Also reassert the 40px input width: WooCommerce's own ".woocommerce .quantity .qty" (3 class selectors) otherwise outranks our 2-class ".cr-qty-stepper input.qty" and wins on specificity. */ .cr-cart-item__qty .cr-qty-stepper { display: inline-flex; } .cr-cart-item__qty .cr-qty-stepper input.qty { width: 40px !important; } .cr-cart-item__price { grid-area: price; text-align: left; } .cr-cart-item .product-remove { position: absolute; top: 1.25rem; right: 0; } } /* Thank-you (order received) page. Every selector below is prefixed with .cr-thankyou-wrap to out-specificity WooCommerce's own `.woocommerce ...` rules (which otherwise silently win and override our font sizes). */ .cr-thankyou-wrap { max-width: 700px; margin: 0 auto; } .cr-thankyou-wrap .cr-ticket-wrap { max-width: 640px; margin: 0 auto; padding: 0 5vw; } .cr-thankyou-wrap .amount, .cr-thankyou-wrap .woocommerce-Price-amount, .cr-thankyou-wrap .woocommerce-Price-amount bdi, .cr-thankyou-wrap .woocommerce-Price-currencySymbol { font-family: var(--font-display); font-size: 1.3rem; white-space: nowrap; word-break: keep-all; overflow-wrap: normal; } .cr-thankyou-wrap .cr-order-strip__cell, .cr-thankyou-wrap .cr-ticket__cell { min-width: 0; } .cr-thankyou-wrap .cr-thankyou { text-align: center; padding: 1rem 0 2rem; } .cr-thankyou-wrap .cr-thankyou__icon { width: 4.5rem; height: 4.5rem; margin: 0 auto 1.25rem; border-radius: 50%; background: rgba(0, 200, 81, 0.15); border: 2px solid rgba(0, 200, 81, 0.5); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #00c851; } .cr-thankyou-wrap .cr-thankyou__title { font-family: var(--font-display); font-size: 2rem; margin-bottom: .75rem; color: var(--c-text); } .cr-thankyou-wrap .cr-thankyou__msg { font-size: 1rem; color: var(--c-text-dim); line-height: 1.6; max-width: 440px; margin: 0 auto; } /* Order summary strip (Order number / Date / Total / Payment method) */ .cr-thankyou-wrap .cr-order-strip { margin: 0 auto 1.5rem; padding: 1.1rem 1.5rem; display: flex; flex-wrap: wrap; gap: 1.1rem 1.75rem; } .cr-thankyou-wrap .cr-order-strip__cell > span { display: block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-mute); margin-bottom: .3rem; } .cr-thankyou-wrap .cr-order-strip__cell strong { color: var(--c-text); font-weight: 600; font-size: .92rem; } /* Ticket cards — one per order item (see inc/thankyou-page.php). Styled like an actual perforated ticket stub, not a wide receipt: the top holds the item + stamp, a dashed tear-line separates it from the details below. */ .cr-thankyou-wrap .cr-ticket { position: relative; overflow: hidden; padding: 0; text-align: left; margin-bottom: 1.25rem; } .cr-thankyou-wrap .cr-ticket__top { padding: 1.5rem 1.75rem 1.4rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .cr-thankyou-wrap .cr-ticket__top .chip { margin-bottom: .65rem; font-size: .7rem; } .cr-thankyou-wrap .cr-ticket__item-name { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 .45rem; color: var(--c-text); line-height: 1.2; } .cr-thankyou-wrap .cr-ticket__item-meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .82rem; color: var(--c-text-dim); } .cr-thankyou-wrap .cr-ticket__item-meta strong { color: var(--c-text-mute); font-weight: 500; } .cr-thankyou-wrap .cr-ticket__stamp { flex: none; width: 4.75rem; height: 4.75rem; border-radius: 50%; border: 2px solid rgba(230, 181, 74, 0.45); background: rgba(230, 181, 74, 0.06); transform: rotate(8deg); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.15; color: var(--c-gold-300); } .cr-thankyou-wrap .cr-ticket__stamp--pending { border-color: rgba(167, 175, 203, 0.4); background: rgba(167, 175, 203, 0.06); color: var(--c-text-dim); } .cr-thankyou-wrap .cr-ticket__stamp-top { font-family: var(--font-body); font-size: .48rem; font-weight: 700; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: var(--c-gold-400); max-width: 3.2rem; } .cr-thankyou-wrap .cr-ticket__stamp--pending .cr-ticket__stamp-top { color: var(--c-text-mute); } .cr-thankyou-wrap .cr-ticket__stamp-mid { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin: .15rem 0; line-height: 1; } .cr-thankyou-wrap .cr-ticket__stamp-bot { font-family: var(--font-body); font-size: .58rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c-text-mute); } .cr-thankyou-wrap .cr-ticket__stamp--confirmed .cr-ticket__stamp-bot { color: var(--c-gold-300); } .cr-thankyou-wrap .cr-ticket__perforation { position: relative; height: 0; border-top: 2px dashed rgba(255, 255, 255, 0.16); margin: 0 1.1rem; } .cr-thankyou-wrap .cr-ticket__perforation::before, .cr-thankyou-wrap .cr-ticket__perforation::after { content: ""; position: absolute; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--c-ink-900); border: 1px solid rgba(255, 255, 255, 0.08); } .cr-thankyou-wrap .cr-ticket__perforation::before { left: calc(-1.1rem - 11px); } .cr-thankyou-wrap .cr-ticket__perforation::after { right: calc(-1.1rem - 11px); } .cr-thankyou-wrap .cr-ticket__grid { padding: 1.4rem 1.75rem 1.6rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.25rem; } .cr-thankyou-wrap .cr-ticket__cell > span { display: block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-mute); margin-bottom: .3rem; } .cr-thankyou-wrap .cr-ticket__cell strong { color: var(--c-text); font-weight: 500; font-size: .92rem; } .cr-thankyou-wrap .cr-ticket__cell--center { grid-column: 1 / -1; text-align: center; } .cr-thankyou-wrap .cr-ticket__cell strong.cr-ticket__code { font-family: var(--font-mono); font-size: 1.2rem; letter-spacing: .08em; color: var(--c-gold-300); } /* Gift certificate — ornamental treatment, distinct from a room/party ticket */ .cr-thankyou-wrap .cr-certificate { margin: 0 auto 1.25rem; border: 1px solid rgba(230, 181, 74, 0.25); border-radius: var(--r-lg); padding: 4px; background: rgba(255, 255, 255, 0.03); } .cr-thankyou-wrap .cr-certificate__inner { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: calc(var(--r-lg) - 4px); padding: 2.25rem 1.75rem; text-align: center; } .cr-thankyou-wrap .cr-certificate__amount { font-family: var(--font-display); font-size: 2.75rem; font-weight: 600; color: var(--c-gold-300); margin: .75rem 0 .5rem; white-space: nowrap; } .cr-thankyou-wrap .cr-certificate__desc { font-size: .88rem; color: var(--c-text-dim); margin: 0 0 1.5rem; } .cr-thankyou-wrap .cr-certificate__divider { display: flex; align-items: center; justify-content: center; gap: .75rem; color: rgba(230, 181, 74, 0.5); margin-bottom: 1.5rem; } .cr-thankyou-wrap .cr-certificate__divider span { flex: 1; max-width: 6rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(230, 181, 74, 0.4)); } .cr-thankyou-wrap .cr-certificate__divider span:last-child { background: linear-gradient(90deg, rgba(230, 181, 74, 0.4), transparent); } .cr-thankyou-wrap .cr-certificate__row { display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; } .cr-thankyou-wrap .cr-certificate__pending { font-size: .86rem; color: var(--c-text-mute); margin: 0; } .cr-thankyou-wrap .cr-thankyou-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* .woocommerce a sets a global gold link color with higher specificity than .btn's own color rule — without this, gold-on-gold text on the primary button (and gold text on the ghost button) becomes unreadable. */ .woocommerce a.btn { color: var(--btn-fg); } .cr-thankyou-wrap .cr-thankyou-next { text-align: center; } .cr-thankyou-wrap .cr-thankyou-next .steps { text-align: left; } /* Order updates (customer notes) — shown on My Account → View Order. */ .cr-thankyou-wrap .cr-order-notes { margin-top: 1.25rem; padding: 1.5rem 1.75rem; text-align: left; } .cr-thankyou-wrap .cr-order-notes__title { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 1rem; color: var(--c-text); } .cr-thankyou-wrap .cr-order-notes__item { padding: .9rem 0; border-top: 1px solid rgba(255, 255, 255, 0.08); } .cr-thankyou-wrap .cr-order-notes__item:first-of-type { border-top: none; padding-top: 0; } .cr-thankyou-wrap .cr-order-notes__date { display: block; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-mute); margin-bottom: .35rem; } .cr-thankyou-wrap .cr-order-notes__text { font-size: .9rem; color: var(--c-text-dim); line-height: 1.5; } .cr-thankyou-wrap .cr-order-notes__text p { margin: 0 0 .5rem; } .cr-thankyou-wrap .cr-order-notes__text p:last-child { margin-bottom: 0; } @media (max-width: 700px) { /* Same row as desktop (chip/title/meta on the left, stamp on the right) — just shrunk a little so the stamp doesn't crowd the text at narrow widths. */ .cr-thankyou-wrap .cr-ticket__top { align-items: center; } .cr-thankyou-wrap .cr-ticket__stamp { width: 3.75rem; height: 3.75rem; } .cr-thankyou-wrap .cr-ticket__stamp-top { font-size: .42rem; max-width: 2.6rem; } .cr-thankyou-wrap .cr-ticket__stamp-mid { font-size: 1.15rem; } .cr-thankyou-wrap .cr-ticket__stamp-bot { font-size: .5rem; } .cr-thankyou-wrap .cr-ticket__grid { grid-template-columns: 1fr; } .cr-thankyou-wrap .cr-order-strip { flex-direction: column; gap: .85rem; } .cr-thankyou-wrap .cr-thankyou-next .steps { grid-template-columns: 1fr !important; } } @media (max-width: 480px) { .cr-thankyou-wrap .cr-thankyou-actions { flex-direction: column; } .cr-thankyou-wrap .cr-thankyou-actions .btn { width: 100%; text-align: center; } } /* My Account -> My Bookings */ .cr-account-bookings { display: flex; flex-direction: column; gap: var(--sp-2); } .cr-account-booking { background: var(--c-ink-800); border: 1px solid var(--c-ink-600); border-radius: var(--r-md); padding: 1.25rem 1.5rem; } .cr-account-booking__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; } .cr-account-booking__row strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--c-text); } .cr-account-booking__meta { font-size: 0.9rem; color: var(--c-text-dim); } .cr-account-booking__refund { margin-top: 0.5rem; font-size: 0.85rem; color: var(--c-text-mute); } .cr-account-booking__cancel { margin-top: 0.75rem; border-top: 1px solid var(--c-ink-600); padding-top: 0.75rem; } .cr-account-booking__cancel summary { cursor: pointer; color: var(--c-error); font-weight: 600; font-size: 0.9rem; } .cr-account-booking__cancel p { margin: 0.75rem 0; font-size: 0.9rem; color: var(--c-text-dim); } .cr-account-booking__rooms { margin: 0.5rem 0 0; padding-left: 1.2rem; font-size: 0.9rem; color: var(--c-text-dim); } .cr-account-booking__note { margin: 0.75rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--c-ink-600); font-size: 0.85rem; color: var(--c-text-mute); } .cr-status-pill { display: inline-flex; align-items: center; padding: 0.3rem 0.85rem; border-radius: var(--r-pill); font-size: 0.78rem; font-weight: 600; white-space: nowrap; } .cr-status-pill--pending_payment { background: rgba(107, 155, 209, 0.16); color: #6c9bd1; } .cr-status-pill--upcoming { background: rgba(230, 181, 74, 0.16); color: var(--c-gold-300); } .cr-status-pill--completed { background: rgba(61, 220, 151, 0.16); color: var(--c-success); } .cr-status-pill--cancelled { background: rgba(255, 84, 112, 0.14); color: var(--c-error); } /* WooCommerce order statuses (Order History) */ .cr-status-pill--processing { background: rgba(107, 155, 209, 0.16); color: #6c9bd1; } .cr-status-pill--pending { background: rgba(230, 181, 74, 0.16); color: var(--c-gold-300); } .cr-status-pill--on-hold { background: rgba(230, 181, 74, 0.16); color: var(--c-gold-300); } .cr-status-pill--refunded { background: rgba(255, 84, 112, 0.14); color: var(--c-error); } .cr-status-pill--failed { background: rgba(255, 84, 112, 0.14); color: var(--c-error); } /* Gift certificate statuses */ .cr-status-pill--active { background: rgba(61, 220, 151, 0.16); color: var(--c-success); } .cr-status-pill--used { background: rgba(255, 255, 255, 0.08); color: var(--c-text-mute); } /* Online game attempts (My Account -> Online Games) */ .cr-status-pill--none { background: rgba(255, 255, 255, 0.08); color: var(--c-text-mute); } .cr-account-games { display: flex; flex-direction: column; gap: var(--sp-2); } .cr-account-game { background: var(--c-ink-800); border: 1px solid var(--c-ink-600); border-radius: var(--r-md); padding: 1.25rem 1.5rem; } .cr-account-game__row { display: flex; align-items: center; gap: 1rem; } .cr-account-game__icon { width: 44px; height: 44px; flex: none; border-radius: var(--r-sm); background: var(--c-ink-700); border: 1px solid var(--c-ink-600); display: grid; place-items: center; overflow: hidden; color: var(--c-gold-300); } .cr-account-game__icon img { width: 100%; height: 100%; object-fit: cover; } .cr-account-game__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .cr-account-game__main strong { font-family: var(--font-display); font-size: 1.1rem; color: var(--c-text); } .cr-account-game__attempts-toggle { display: flex; align-items: center; gap: 0.4rem; width: 100%; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--c-ink-600); background: none; border-left: none; border-right: none; border-bottom: none; font-family: inherit; font-size: 0.88rem; font-weight: 600; color: var(--c-gold-300); cursor: pointer; transition: color var(--t-fast); } .cr-account-game__attempts-toggle:hover { color: var(--c-gold-200); } .cr-account-game__attempts-toggle svg { transition: transform var(--t-med) var(--ease-out); } .cr-account-game__attempts-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .cr-account-game__attempts-panel { max-height: 0; overflow: hidden; transition: max-height var(--t-slow) var(--ease-out); } .cr-account-game__attempts { list-style: none; margin: 0; padding: 0.9rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; } .cr-account-game__attempt { display: flex; align-items: center; gap: 0.75rem; font-size: 0.88rem; color: var(--c-text-dim); } .cr-account-game__attempt-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; border-radius: 50%; } .cr-account-game__attempt-icon svg { display: block; } .cr-account-game__attempt-icon.is-success { background: rgba(61, 220, 151, 0.16); color: var(--c-success); } .cr-account-game__attempt-icon.is-fail { background: rgba(255, 84, 112, 0.14); color: var(--c-error); } .cr-account-game__attempt-time { font-family: var(--font-display); font-size: 1.15rem; color: var(--c-text); min-width: 3.5rem; } .cr-account-game__attempt-status { flex: 1; } .cr-account-game__attempt-date { color: var(--c-text-mute); white-space: nowrap; } .cr-account-game__no-attempts { margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--c-ink-600); font-size: 0.88rem; color: var(--c-text-mute); } @media (max-width: 640px) { .cr-account-game__row { flex-wrap: wrap; } .cr-account-game__attempt { flex-wrap: wrap; } } /* Small button size — used for row-list/card actions across My Account */ .btn--sm { padding: 0.55rem 1.1rem; font-size: 0.82rem; } /* My Account — dashboard */ .cr-account-greeting { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 1.5rem; } .cr-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2.5rem; } .cr-stat-card { display: block; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-md); padding: 1.25rem; color: var(--c-text); transition: border-color var(--t-fast), transform var(--t-fast); } .cr-stat-card:hover { border-color: rgba(230, 181, 74, 0.35); transform: translateY(-2px); color: var(--c-text); } .cr-stat-card__icon { display: block; width: 22px; height: 22px; color: var(--c-gold-400); margin-bottom: 0.75rem; } .cr-stat-card__num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; margin-bottom: 0.2rem; } .cr-stat-card__label { font-size: 0.78rem; color: var(--c-text-mute); } .cr-section-label { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-mute); font-weight: 700; margin-bottom: 1rem; } .cr-activity-list { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-md); } .cr-activity-item { display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .cr-activity-item:last-child { border-bottom: none; } .cr-activity-item__icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(230, 181, 74, 0.1); display: flex; align-items: center; justify-content: center; flex: none; } .cr-activity-item__icon svg { width: 16px; height: 16px; color: var(--c-gold-400); } .cr-activity-item__text { flex: 1; font-size: 0.9rem; color: var(--c-text-mute); } .cr-activity-item__text strong { color: var(--c-text); font-weight: 500; } .cr-activity-item__date { font-size: 0.78rem; color: var(--c-text-mute); white-space: nowrap; } /* My Account — generic row list (Order History) */ .cr-row-list { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-md); overflow: hidden; } .cr-row-item { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 1.1rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .cr-row-item:last-child { border-bottom: none; } .cr-row-item__icon { width: 42px; height: 42px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; flex: none; } .cr-row-item__icon svg { width: 19px; height: 19px; color: var(--c-gold-300); } .cr-row-item__title { font-size: 0.92rem; font-weight: 600; margin-bottom: 0.2rem; } .cr-row-item__sub { font-size: 0.8rem; color: var(--c-text-mute); } .cr-row-item__price { font-size: 0.9rem; font-weight: 600; white-space: nowrap; } .cr-row-item__actions { display: flex; gap: 0.5rem; } @media (max-width: 720px) { .cr-stat-grid { grid-template-columns: repeat(2, 1fr); } /* Icon on the left; on the right, order number + "N items · date" (.cr-row-item__main already stacks those two internally) on the left half, price above the View button on the right half — .cr- status-pill gets its own full-width row underneath both. */ .cr-row-item { grid-template-columns: auto 1fr auto; grid-template-areas: "icon main price" "icon main actions" "icon status status"; align-items: center; row-gap: 0.35rem; } .cr-row-item__icon { grid-area: icon; } .cr-row-item__main { grid-area: main; } .cr-row-item__price { grid-area: price; justify-self: end; } .cr-row-item__actions { grid-area: actions; justify-self: end; } .cr-status-pill { grid-area: status; justify-self: start; margin-top: 0.2rem; } } /* My Account — Gift Certificates */ .cr-gift-list { display: flex; flex-direction: column; gap: 0.9rem; } .cr-gift-card { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(230, 181, 74, 0.3); border-radius: var(--r-md); padding: 1.25rem 1.4rem; } .cr-gift-card__value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; color: var(--c-gold-300); min-width: 70px; } .cr-gift-card__of { font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; color: var(--c-text-mute); white-space: nowrap; } .cr-gift-card__info { flex: 1; min-width: 200px; } .cr-gift-card__code { font-family: var(--font-mono, monospace); font-size: 0.85rem; letter-spacing: 0.04em; color: var(--c-text); } .cr-gift-card__sub { font-size: 0.8rem; color: var(--c-text-mute); margin-top: 0.25rem; } /* My Account — Addresses */ .cr-account-lead { color: var(--c-text-mute); font-size: 0.9rem; margin: 0 0 1.5rem; } .cr-address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .cr-address-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-md); padding: 1.4rem 1.5rem; } .cr-address-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; } .cr-address-card__head h4 { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-mute); margin: 0; font-weight: 700; } .cr-address-card__edit { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--c-gold-400); font-size: 0.82rem; } .cr-address-card__edit:hover { color: var(--c-gold-300); } .cr-address-card__body p { margin: 0 0 0.3rem; font-size: 0.9rem; color: var(--c-text-mute); font-style: normal; } .cr-address-card__body p:first-child { color: var(--c-text); font-weight: 500; } @media (max-width: 720px) { .cr-address-grid { grid-template-columns: 1fr; } } /* My Account — Account Details: both the form and the Danger Zone below it (a separate block after the form, since it posts to a different handler) fill the full width of .woocommerce-MyAccount-content/.cr-account-content, rather than capping to an arbitrary reading width. */ .cr-account-details { max-width: 100%; } .cr-danger-zone { max-width: 100%; } .cr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; border: none; padding: 0; margin: 0; } .cr-form-grid.cr-form-grid--plain legend { display: none; } .cr-form-field--full { grid-column: 1 / -1; } .cr-form-field__note { display: block; margin-top: 0.4rem; font-size: 0.78rem; color: var(--c-text-mute); } .cr-section-divider { border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 1.8rem 0 1.4rem; } .cr-danger-zone { border: 1px solid rgba(255, 84, 112, 0.25); border-radius: var(--r-lg); padding: var(--sp-4); } .cr-danger-zone__text { color: var(--c-text-mute); font-size: 0.9rem; margin: 0.4rem 0 1.2rem; } .cr-danger-zone__confirm { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.88rem; color: var(--c-text-mute); margin: 0.9rem 0 1.2rem; } .cr-danger-zone__confirm input { margin-top: 0.2rem; } .btn--danger { --btn-bg: var(--c-error); --btn-fg: #fff; /* !important: WooCommerce's own woocommerce.css / this file's own ".woocommerce button.button:not(.product-card button)" rule (for the "Delete My Account" button, which carries WC's own .button class too) sets a literal `background: var(--c-gold-400)` that beats plain .btn--danger on specificity — same family of fix as the .btn overflow override above. */ background: var(--c-error) !important; color: #fff !important; } .btn--danger:hover { box-shadow: 0 18px 40px -16px rgba(255, 84, 112, 0.7); } .cr-form-actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; } @media (max-width: 640px) { .cr-form-grid { grid-template-columns: 1fr; } } /* My Account — empty states (Online Games placeholder, no orders/certificates yet) */ .cr-account-empty { text-align: center; max-width: 380px; margin: 2.5rem auto; padding: 2rem 1.5rem; } .cr-account-empty__icon { color: var(--c-gold-400); margin-bottom: 1rem; } .cr-account-empty h3 { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 0.6rem; } .cr-account-empty p { color: var(--c-text-mute); font-size: 0.9rem; margin: 0 0 1.4rem; }