elements before the first product
* to hold loop state. Without dense, those invisible items
* occupy cell 1 and push the first real product into cell 2
* — visible bug on /product-category/* and /shop/ on mobile. */
grid-auto-flow:dense !important;
}
/* Belt-and-suspenders: hide any non-product child the WC loop
* dropped in (filter
, woocommerce_loop_add_to_cart helpers
* rendered outside .product, etc.) so they can't claim a cell. */
.woocommerce ul.products > li:not(.product),
.woocommerce ul.products > li:empty {
display:none !important;
}
/* Force the first VISIBLE product to start in column 1. Works
* even if some invisible non-product element somehow slipped past
* the rule above (defense in depth). */
.woocommerce ul.products > li.product:first-of-type {
grid-column-start:1 !important;
}
/* Match WC default specificity (.columns-N adds an extra class selector,
so we add it too) — otherwise WC's width:48% / margin:3.8% wins. */
.woocommerce ul.products li.product,
.woocommerce ul.products.columns-1 li.product,
.woocommerce ul.products.columns-2 li.product,
.woocommerce ul.products.columns-3 li.product,
.woocommerce ul.products.columns-4 li.product,
.woocommerce ul.products.columns-5 li.product,
.woocommerce ul.products.columns-6 li.product,
.woocommerce-page ul.products.columns-2 li.product,
.woocommerce-page ul.products.columns-3 li.product,
.woocommerce-page ul.products.columns-4 li.product{
background:var(--bg-2);
border:1px solid var(--bg-3);
border-radius:var(--radius);
overflow:hidden;
margin:0 !important;
padding:0 !important;
width:100% !important;
max-width:none !important;
float:none !important;
flex:none !important;
justify-self:stretch !important;
}
/* ============== HOMEPAGE RECENT PRODUCTS (custom loop, avoids WC CSS) ============== */
/* iOS Safari grid layout fix — see .cat-grid comment for the
* rationale. Product cards contain WC-generated tags with
* intrinsic width/height attributes (woocommerce_thumbnail is
* 300×300 by default), which iOS Safari can compute as the
* min-content width of the grid cell, expanding the 1fr columns
* past their nominal half-share. min-width:0 on cards forces
* Safari to honor the 1fr split. width:100% + box-sizing on the
* grid prevents the padding from being added on top of the
* computed width. */
.ace-products{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
padding:0 16px;
width:100%;
max-width:100%;
box-sizing:border-box;
}
.ace-products > * {
min-width: 0;
max-width: 100%;
}
.ace-product-card{
background:var(--bg-2);
border:1px solid var(--bg-3);
border-radius:var(--radius);
overflow:hidden;
display:flex;flex-direction:column;
text-decoration:none;color:inherit;
transition:transform .2s, border-color .2s;
}
.ace-product-card:active{transform:scale(.98);border-color:var(--gold)}
.ace-product-img{
position:relative;background:#fff;
aspect-ratio:1;
display:flex;align-items:center;justify-content:center;
padding:14px;
/* Defensive: clip any image that overflows the box (iOS Safari
* sometimes renders an with intrinsic width="300" attr
* at its raw size briefly before object-fit kicks in, causing
* a flash of overflow). */
overflow:hidden;
}
/* iOS Safari image centering — explicit object-position prevents
* the image from being right-shifted within its container. WC's
* get_image() output includes width="300" height="300" HTML
* attributes; without explicit object-position:center, some iOS
* Safari versions compute the image's "natural" position based on
* those attrs and offset it inside the flex container.
*
* margin:auto + block display ensures the flex parent treats the
* image as a centered block, not an inline element shifted by
* font baseline whitespace (iOS Safari adds ~3-4px of phantom
* baseline space below inline images in flex containers, which
* doesn't apply to block images). */
.ace-product-img img{
width:100%;height:100%;
object-fit:contain;
object-position:center center;
margin:0 auto !important;
display:block;
/* Reset any WC-injected positioning. */
position:static;
left:auto;right:auto;top:auto;bottom:auto;
transform:none;
}
.ace-product-info{padding:10px 12px 12px}
.ace-product-name{
font-size:13px;font-weight:600;color:#fff;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;min-height:38px;
}
.ace-product-price{
color:var(--gold);font-size:15px;font-weight:800;
margin-top:6px;
}
/* Rating + sales-count meta row — shown under the price on
* homepage Ready Stok, Semua Produk, shop archive, and search
* results. Sales always renders (even "0 terjual") so card shape
* stays consistent; rating only renders when > 0 so empty stars
* don't look broken. */
.ace-product-meta{
display:flex;align-items:center;gap:6px;flex-wrap:wrap;
margin-top:6px;font-size:11px;color:#888;line-height:1.2;
}
.ace-product-rating{display:inline-flex;align-items:center;gap:3px}
.ace-stars{
position:relative;display:inline-block;
font-size:13px;letter-spacing:1.5px;line-height:1;
height:1em;
}
.ace-stars-bg{
color:rgba(212,175,55,0.25);
}
.ace-stars-fg{
position:absolute;top:0;left:0;
color:#d4af37;overflow:hidden;white-space:nowrap;
text-shadow:0 0 3px rgba(212,175,55,0.4);
}
.ace-product-rating-num{
color:#d4af37;font-weight:800;font-size:11px;
}
.ace-product-reviews{color:#666;font-size:10px}
.ace-product-meta-sep{color:#444;font-size:11px;margin:0 2px}
.ace-product-sales{color:#aaa;font-weight:500;font-size:11px}
/* Mirror onto the WC native loop card too (related/upsells use
* .product-info / .product-price). */
.product-info .ace-product-meta{margin-top:4px}
.ace-product-img .product-badge{
position:absolute;top:8px;left:8px;
/* Bright red so SALE stands out from the gold theme + isn't
* confused with the GARANSI RESMI pill. Higher z-index than
* the gold corner triangle (which lives at z-index:3) so the
* badge always sits on top if both are present. */
background:linear-gradient(135deg,#ff4757,#e02020);
color:#fff;
font-size:10px;font-weight:900;padding:3px 9px;border-radius:6px;
text-shadow:0 1px 1px rgba(0,0,0,0.3);
box-shadow:0 2px 6px rgba(229,32,32,0.45);
letter-spacing:0.4px;
z-index:5;
}
/* Hide the gold corner triangle when the SALE badge is present
* on the same card. The triangle's diagonal cut overlaps the
* top-left badge area and clips the "S" of "SALE" — :has() lets
* us scope this without adding a class via PHP. */
.ace-product-card:has(.ace-product-img .product-badge)::before,
a.product:has(.product-img .product-badge)::before{
display:none;
}
/* Suppress the WC strikethrough that normally wraps the
* original regular price on sale products. The PHP filter strips
* it too, but cart line items and mini-cart sometimes compose
* price HTML through paths that bypass the filter, so this CSS
* is the safety net.
*
* NB: CONTAINS the sale price (the one we want to keep
* visible), so we don't hide it — we just kill the default
* browser underline styling. */
.ace-product-price del,
.product-price del,
.product-detail-price del,
.woocommerce-Price-amount del,
.wc-block-components-product-price del,
.wc-block-cart-items del{
display:none !important;
}
/* Remove the browser-default underline on tags that WC
* wraps the sale price in, so the price reads cleanly. */
.ace-product-price ins,
.product-price ins,
.product-detail-price ins,
.woocommerce-Price-amount ins,
.wc-block-components-product-price ins,
.wc-block-cart-items ins,
.price ins{
text-decoration: none !important;
background: transparent !important;
}
/* ============================================================
* Push notification subscribe modal
*
* Centered overlay with backdrop. Injected by
* assets/push-subscribe.js when the user hasn't yet subscribed
* AND the dismiss-until timestamp is in the past. Pops up on
* every page load (or until user clicks "Tutup" with the "Jangan
* tampilkan lagi hari ini" checkbox checked → suppresses until
* local midnight tonight).
* ============================================================ */
.aceshop-push-modal-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.75);
z-index:2147483640;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
animation:aceshop-push-modal-fade .22s ease-out;
-webkit-tap-highlight-color:transparent;
}
.aceshop-push-modal-overlay.is-leaving{
animation:aceshop-push-modal-fade-out .2s ease-in forwards;
}
.aceshop-push-modal-card{
background:#1a1a1a;
border:1.5px solid rgba(212,175,55,0.4);
border-radius:16px;
padding:28px 24px 20px;
max-width:380px;
width:100%;
text-align:center;
box-shadow:
0 20px 60px rgba(0,0,0,0.7),
0 0 30px rgba(212,175,55,0.18);
color:#fff;
font-family:inherit;
animation:aceshop-push-modal-pop .24s ease-out;
}
.aceshop-push-modal-icon{
font-size:42px;
line-height:1;
margin-bottom:10px;
}
.aceshop-push-modal-title{
font-size:18px;
font-weight:800;
color:var(--gold, #d4af37);
margin:0 0 10px;
letter-spacing:0.2px;
}
.aceshop-push-modal-body{
font-size:13.5px;
line-height:1.55;
color:#bbb;
margin:0 0 14px;
}
.aceshop-push-modal-check{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
font-size:12.5px;
color:#888;
cursor:pointer;
user-select:none;
margin-bottom:18px;
}
.aceshop-push-modal-check input{
accent-color:var(--gold, #d4af37);
width:14px;height:14px;
cursor:pointer;
}
.aceshop-push-modal-actions{
display:flex;
gap:8px;
}
.aceshop-push-modal-actions button{
flex:1;
font:inherit;
padding:11px 16px;
border-radius:10px;
border:none;
cursor:pointer;
font-size:14px;
font-weight:800;
transition:transform .12s, background .15s;
}
.aceshop-push-modal-deny{
background:#2a2a2a;
color:#bbb;
}
.aceshop-push-modal-deny:hover{ background:#333; color:#fff; }
.aceshop-push-modal-allow{
background:linear-gradient(135deg, var(--gold, #d4af37), #b08820);
color:#000;
}
.aceshop-push-modal-allow:hover{ transform:translateY(-1px); }
.aceshop-push-modal-allow:active{ transform:scale(.97); }
/* Lock the page scroll while modal is open. */
body.aceshop-push-modal-locked{ overflow:hidden; }
/* ============================================================
* "Notifikasi" card on the My Account page
*
* Two states, swapped by push-subscribe.js:
*
* Default (not subscribed)
* - Gold border, bell emoji, "Aktifkan notifikasi pesanan"
* - Click → open subscribe modal
*
* .is-subscribed
* - Green border, animated checkmark icon, "Notifikasi sudah
* aktif", chevron stays so the user knows it's still
* interactive (clicking opens the unsubscribe confirmation)
* - Description copy below also swaps
* ============================================================ */
.ace-notif-card-link{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
background:var(--bg-2);
border:1px solid rgba(212,175,55,0.35);
border-radius:14px;
padding:16px 18px;
margin-bottom:14px;
text-decoration:none;
color:inherit;
transition:border-color .15s, background .15s;
}
.ace-notif-card-link:hover{ border-color:rgba(212,175,55,0.6) }
.ace-notif-row{ display:flex;align-items:center;gap:12px;min-width:0 }
.ace-notif-icon{
width:42px;height:42px;flex:0 0 42px;
border-radius:12px;
background:linear-gradient(135deg,rgba(212,175,55,0.18),rgba(212,175,55,0.05));
display:flex;align-items:center;justify-content:center;
color:var(--gold);font-size:22px;
transition:background .25s, color .25s;
}
.ace-notif-icon-default{ display:block }
.ace-notif-icon-check { display:none }
.ace-notif-text{ min-width:0 }
.ace-notif-eyebrow{
font-size:11px;letter-spacing:1px;text-transform:uppercase;
color:var(--text-dim);font-weight:700;
}
.ace-notif-label{
font-size:14px;font-weight:700;color:#fff;margin-top:2px;
}
.ace-notif-chevron{ color:var(--gold);font-size:18px }
.ace-notif-desc{
font-size:11px;color:var(--text-dim);
margin:-8px 4px 14px;line-height:1.55;
}
/* Subscribed state — green tint, animated check */
.ace-notif-card-link.is-subscribed{
border-color:rgba(127,219,154,0.55);
}
.ace-notif-card-link.is-subscribed:hover{
border-color:rgba(127,219,154,0.85);
}
.ace-notif-card-link.is-subscribed .ace-notif-icon{
background:linear-gradient(135deg,rgba(127,219,154,0.20),rgba(127,219,154,0.06));
color:#7fdb9a;
}
.ace-notif-card-link.is-subscribed .ace-notif-icon-default{ display:none }
.ace-notif-card-link.is-subscribed .ace-notif-icon-check {
display:block;
animation:aceshop-notif-check-in .35s ease-out;
}
.ace-notif-card-link.is-subscribed .ace-notif-chevron{ color:#7fdb9a }
@keyframes aceshop-notif-check-in{
from{ transform:scale(0); opacity:0; }
60% { transform:scale(1.2); opacity:1; }
to { transform:scale(1); opacity:1; }
}
/* ============================================================
* Unsubscribe confirmation modal — reuses the .aceshop-push-modal
* overlay shell, but with red Matikan accent for destructive
* intent. Loading + success states mirror the subscribe modal.
* ============================================================ */
.aceshop-push-modal-card.is-danger{
border-color:rgba(255,87,87,0.55);
}
.aceshop-push-modal-card.is-danger .aceshop-push-modal-title{
color:#ff6b6b;
}
.aceshop-push-modal-disable{
background:linear-gradient(135deg,#ff4757,#e02020) !important;
color:#fff !important;
}
.aceshop-push-modal-disable:hover{ transform:translateY(-1px) }
.aceshop-push-modal-disable:active{ transform:scale(.97) }
/* Helper note inside the unsubscribe-success modal that explains
* why the browser's own notification permission still reads as
* "active" after we've removed the subscription server-side.
* Distinct visual from the body copy — a softer info box, not
* mistaken for the headline. */
.aceshop-push-perm-hint{
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
border-radius:10px;
padding:12px 14px;
margin-top:14px;
text-align:left;
}
.aceshop-push-perm-hint-title{
font-size:12px;font-weight:700;color:#bbb;
margin-bottom:6px;
display:flex;align-items:center;gap:6px;
}
.aceshop-push-perm-hint-body{
font-size:11.5px;line-height:1.5;color:#888;
margin:0;
}
.aceshop-push-perm-hint-body em{
color:#ddd;font-style:normal;font-weight:600;
}
/* Loading state — small spinner inside the Aktifkan button. The
* card itself dims slightly so the click feels processed. */
.aceshop-push-modal-card.is-loading{
opacity:0.92;
}
.aceshop-push-modal-card.is-loading button{
cursor:wait;
}
.aceshop-push-spinner{
display:inline-block;
width:14px;height:14px;
border:2px solid rgba(0,0,0,0.25);
border-top-color:#000;
border-radius:50%;
animation:aceshop-push-spin .7s linear infinite;
vertical-align:middle;
margin-right:8px;
}
.aceshop-push-allow-text{ vertical-align:middle }
@keyframes aceshop-push-spin{
to { transform:rotate(360deg); }
}
/* Success state — card briefly turns green-bordered, checkmark
* SVG draws itself with a circle that strokes around then a
* check that strokes through. Pulled inspiration from the
* "iCheckMark" pattern; entirely CSS-animated SVG, no GIF. */
.aceshop-push-modal-card.is-success{
border-color:rgba(127,219,154,0.55);
box-shadow:
0 20px 60px rgba(0,0,0,0.7),
0 0 30px rgba(127,219,154,0.22);
}
.aceshop-push-modal-card.is-success .aceshop-push-modal-title{
color:#7fdb9a;
}
.aceshop-push-success-icon{
display:flex;
justify-content:center;
margin-bottom:10px;
}
.aceshop-push-success-icon svg{
display:block;
}
.aceshop-push-success-circle{
stroke:#7fdb9a;
stroke-dasharray:166;
stroke-dashoffset:166;
animation:aceshop-push-circle-draw .55s ease-out forwards;
}
.aceshop-push-success-check{
stroke:#7fdb9a;
stroke-dasharray:60;
stroke-dashoffset:60;
animation:aceshop-push-check-draw .35s .45s ease-out forwards;
}
@keyframes aceshop-push-circle-draw{
to { stroke-dashoffset:0; }
}
@keyframes aceshop-push-check-draw{
to { stroke-dashoffset:0; }
}
/* Error state — small red helper text under the body copy. */
.aceshop-push-modal-error{
color:#ff6b6b;
font-size:12px;
margin:-8px 0 14px;
text-align:center;
}
@media (prefers-reduced-motion: reduce){
.aceshop-push-spinner,
.aceshop-push-success-circle,
.aceshop-push-success-check{ animation:none !important; }
.aceshop-push-success-circle{ stroke-dashoffset:0 !important; }
.aceshop-push-success-check { stroke-dashoffset:0 !important; }
}
@keyframes aceshop-push-modal-fade{
from{ opacity:0; }
to { opacity:1; }
}
@keyframes aceshop-push-modal-fade-out{
from{ opacity:1; }
to { opacity:0; }
}
@keyframes aceshop-push-modal-pop{
from{ transform:scale(.92); opacity:0; }
to { transform:scale(1); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
.aceshop-push-modal-overlay,
.aceshop-push-modal-card,
.aceshop-push-modal-overlay.is-leaving{ animation:none !important; }
}
/* ============================================================
* Three-line price stack on checkout / cart line items.
*
* Replaces WC Blocks' messy double-rendering (it draws the
* sale prices both in the main price column AND a secondary
* unit-price line, plus its own "Hemat" pill — three competing
* elements per row). Our stack consolidates everything into
* one clean column:
*
* Harga Normal ─── Rp 1.599.000 ← struck through, dim
* Hemat ─── Rp 124.000 [-8%] ← red callout
* Harga Promo ─── Rp 1.475.000 ← bold gold (final)
*
* Injected by assets/checkout-savings.js for on-sale rows
* only. Non-sale rows keep WC's default rendering.
* ============================================================ */
.ace-price-stack{
display:flex;
flex-direction:column;
gap:5px;
margin-top:4px;
min-width:160px;
animation:ace-price-stack-in .35s ease-out;
}
.ace-price-row{
display:flex;
justify-content:space-between;
align-items:baseline;
gap:10px;
font-size:12px;
line-height:1.25;
}
.ace-price-label{
color:#888;
font-size:11px;
font-weight:600;
letter-spacing:0.2px;
flex:0 0 auto;
white-space:nowrap;
}
.ace-price-value{
display:inline-flex;
align-items:center;
gap:6px;
font-weight:700;
text-align:right;
white-space:nowrap;
}
/* Row 1: struck-through normal price, muted */
.ace-price-row.is-regular .ace-price-value del{
color:#888;
text-decoration:line-through;
font-weight:600;
font-size:12px;
}
/* Row 2: savings — red marketplace-style callout */
.ace-price-row.is-savings{
/* Slightly tighter top/bottom rhythm so the red row reads
* as a single block with the value chip. */
align-items:center;
}
.ace-price-row.is-savings .ace-price-savings-amount{
display:inline-block;
padding:3px 9px 3px 9px;
background:linear-gradient(135deg, #ff4757 0%, #e02020 60%, #c01010 100%);
color:#fff;
font-size:11.5px;
font-weight:900;
border-radius:6px 0 0 6px;
letter-spacing:0.25px;
text-shadow:0 1px 1px rgba(0,0,0,0.3);
box-shadow:0 2px 6px rgba(229,32,32,0.32);
}
.ace-price-row.is-savings .ace-price-savings-pct{
display:inline-block;
padding:3px 8px 3px 7px;
background:#b81010;
color:#fff;
font-size:10.5px;
font-weight:900;
border-radius:0 6px 6px 0;
letter-spacing:0.3px;
margin-left:-1px;
box-shadow:0 2px 6px rgba(180,16,16,0.28);
}
/* Row 3: final promo price — bold gold, the headline value */
.ace-price-row.is-final{
padding-top:3px;
border-top:1px dashed rgba(212,175,55,0.18);
}
.ace-price-row.is-final .ace-price-label{
color:var(--gold, #d4af37);
font-weight:800;
font-size:11.5px;
text-transform:uppercase;
letter-spacing:0.6px;
}
.ace-price-row.is-final .ace-price-value{
color:var(--gold, #d4af37);
font-weight:900;
font-size:14px;
}
@keyframes ace-price-stack-in{
from{ opacity:0; transform:translateY(2px); }
to { opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
.ace-price-stack{ animation:none !important; }
}
/* Mobile — slightly smaller for portrait phones, same structure. */
@media (max-width: 480px){
.ace-price-stack{ min-width:140px; gap:4px }
.ace-price-label{ font-size:10.5px }
.ace-price-row{ font-size:11.5px }
.ace-price-row.is-final .ace-price-value{ font-size:13px }
.ace-price-row.is-savings .ace-price-savings-amount,
.ace-price-row.is-savings .ace-price-savings-pct{ font-size:10.5px; padding:2.5px 7px }
}
/* Hide WC Blocks' native savings text everywhere (defense in
* depth — JS already display:none's these inline; this catches
* any variant the script's selector list missed). */
.wc-block-components-product-price__savings,
.wc-block-components-product-metadata__discount,
.wc-block-components-cart-item-description--discount,
.wc-block-components-formatted-money-amount.is-discount{
display:none !important;
}
/* When a row has our injected .ace-price-stack, kill the WC-
* native total-price column on the right (which is what was
* still showing "Hemat Rp 124.000" floating in the top-right
* corner) plus the secondary unit-price line. :has() shipped
* in Chrome 105 / Safari 15.4 / Firefox 121 — covers every
* browser that can run modern push notifications anyway. */
.wc-block-components-order-summary-item:has(.ace-price-stack) .wc-block-components-order-summary-item__total-price,
.wc-block-components-order-summary-item:has(.ace-price-stack) .wc-block-components-order-summary-item__individual-prices,
.wc-block-cart-items__row:has(.ace-price-stack) .wc-block-cart-item__price,
.wc-block-cart-items__row:has(.ace-price-stack) .wc-block-cart-item__total .wc-block-components-product-price{
display:none !important;
}
/* Auto-computed discount-percentage badge ("-25%") appended to
* every WC price rendered via get_price_html(). Sits inline to
* the right of the price so it reads as "Rp 1.500.000 -25%" on
* cards, detail pages, cart line items, mini-cart, anywhere.
*
* Inline-block + vertical-align middle so multi-line price
* ranges ("Rp 8.750.000 – Rp 9.000.000") still align the badge
* with the bottom-most price line. */
.ace-discount-badge{
display:inline-block;
vertical-align:middle;
margin-left:8px;
padding:2px 8px;
background:linear-gradient(135deg, #ff4757 0%, #e02020 100%);
color:#fff;
font-size:11px;
font-weight:900;
letter-spacing:0.3px;
border-radius:6px;
line-height:1.5;
box-shadow:
0 2px 6px rgba(229, 32, 32, 0.4),
0 0 0 1px rgba(255,100,100,0.5) inset;
text-shadow:0 1px 1px rgba(0,0,0,0.3);
white-space:nowrap;
}
/* On compact contexts (product card prices) the badge should not
* push the price wrap to a new line — let WC's price element
* grow naturally. */
.ace-product-price .ace-discount-badge,
.product-price .ace-discount-badge{
font-size:10.5px;
padding:2px 7px;
}
/* Single-product detail page — slightly larger so it reads at
* the same weight as the headline price. */
.product-detail-price .ace-discount-badge,
.woocommerce-product-details__price .ace-discount-badge{
font-size:13px;
padding:3px 10px;
margin-left:10px;
}
/* ================================================================
* TERLARIS + BARU highlights
*
* .is-terlaris card root → gold/diamond shimmering frame + soft gold
* halo ambient glow. Only the top-3 best-sellers (by combined manual +
* native sales) get it, so the shine stays exclusive and the buyer
* eye lands on the proven winners first.
*
* .ace-badge-terlaris → red→orange→gold animated flame pill, sits
* just below the gold triangle on the top-left.
*
* .ace-badge-baru → cyan→mint pill for products published in the
* last 14 days, sits just below the GARANSI RESMI pill on the
* top-right. Both badges can coexist (a hot brand-new launch).
* ================================================================ */
/* Uniform solid gold frame on TERLARIS cards — no gradient stops
* in the static state. The padding-box / border-box layered
* background trick fills only the 2px transparent border ring
* with #d4af37 (single solid color). The card interior stays
* var(--bg-2). */
.ace-product-card.is-terlaris,
a.product.is-terlaris{
border: 2px solid transparent !important;
background:
linear-gradient(var(--bg-2, #141414), var(--bg-2, #141414)) padding-box,
linear-gradient(#d4af37, #d4af37) border-box !important;
box-shadow:
0 0 18px rgba(255,215,0,0.22),
0 0 38px rgba(255,170,0,0.11),
0 6px 20px rgba(0,0,0,0.45) !important;
}
.ace-product-card.is-terlaris:hover,
a.product.is-terlaris:hover{
box-shadow:
0 0 28px rgba(255,215,0,0.45),
0 0 56px rgba(255,170,0,0.22),
0 10px 28px rgba(0,0,0,0.5) !important;
transform: translateY(-3px);
}
/* Traveling shine comet — single element with elliptical radial-
* gradient that's NATIVELY thick-middle / thin-ends. Glides along
* the card's rounded-rectangle perimeter via CSS Motion Path,
* keeping its long axis tangent to the path so it curves through
* corners.
*
* Why offset-path instead of rotated mask: a uniform mask ring
* forces uniform line thickness around the entire perimeter.
* offset-path lets the comet's SHAPE — bright thick middle that
* tapers to nothing at the ends — define what the user sees,
* which is exactly what they asked for. */
.ace-shine-comet{
position: absolute;
/* Long elliptical body: 120px along the path, 14px across it.
* The 14px thickness is intentionally a touch wider than the
* 2px gold border — combined with the blur + drop-shadow halo
* below, the visible "fat" middle of the line reads as ~20-30px
* wide while the tails fade to nothing. */
width: 120px;
height: 14px;
/* radial-gradient closest-side ellipse hugs the box's aspect.
* Bright white core (0-15%) holds full intensity, then ramps
* through cream → warm gold → transparent at the box edges.
* The bright core extends the perceived thickness of the line. */
background: radial-gradient(ellipse closest-side,
#ffffff 0%,
rgba(255,255,255,0.95) 15%,
rgba(255,250,205,0.85) 30%,
rgba(255,215,100,0.55) 50%,
rgba(255,170,0,0.20) 75%,
transparent 100%);
border-radius: 50%;
/* Path: inset by 1px so the comet straddles the inside edge of
* the 2px gold border. Half the body sits on the gold border
* (the visible "lit border" effect), half on the card interior
* adjacent to it (forms the inner glow leak). */
offset-path: inset(1px round var(--radius, 12px));
offset-rotate: auto;
offset-anchor: center;
offset-distance: 0%;
animation: ace-shine-comet-run 4.5s linear infinite;
/* Layered glow: a small blur softens the comet's edges so it
* doesn't look like a hard pill, then three drop-shadows stack
* the halo — bright white kernel + soft white mid + warm gold
* outer wash. This is what makes the visible line read as
* "tebal dan bersinar" (thick and glowing) rather than a flat
* 14px ellipse. */
filter:
blur(2px)
drop-shadow(0 0 5px rgba(255,255,255,0.95))
drop-shadow(0 0 12px rgba(255,255,255,0.55))
drop-shadow(0 0 22px rgba(255,200,80,0.55))
drop-shadow(0 0 36px rgba(255,170,0,0.30));
/* Screen blend so the comet "burns" through whatever's behind
* it — the gold border momentarily glows white-hot as the
* comet passes. */
mix-blend-mode: screen;
pointer-events: none;
z-index: 4;
}
@keyframes ace-shine-comet-run{
to { offset-distance: 100%; }
}
/* TERLARIS pill — sits under the GARANSI RESMI pill on the
* top-right (shares its slot with .ace-badge-baru; PHP renders
* only one of the two — TERLARIS wins when both apply). */
.ace-badge-terlaris{
position:absolute;
top:36px; right:6px;
display:inline-flex;align-items:center;gap:3px;
padding:4px 9px 4px 7px;
border-radius:7px;
font-size:10px;font-weight:900;letter-spacing:0.6px;
background: linear-gradient(135deg,
#ff3838 0%,
#ff6b00 35%,
#ffb300 70%,
#ffd700 100%);
background-size: 200% 200%;
color:#fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.45);
box-shadow:
0 3px 10px rgba(255,120,0,0.55),
0 0 0 1px rgba(255,215,0,0.65) inset;
z-index:5;
pointer-events:none;
white-space:nowrap;
animation: ace-terlaris-flame 2.4s ease-in-out infinite;
}
.ace-badge-terlaris span{font-size:11px;line-height:1}
@keyframes ace-terlaris-flame{
0%, 100% { background-position: 0% 0%; transform: scale(1) }
50% { background-position: 100% 100%; transform: scale(1.05) }
}
/* BARU pill — sits under the GARANSI RESMI pill on the top-right. */
.ace-badge-baru{
position:absolute;
top:36px; right:6px;
display:inline-flex;align-items:center;gap:3px;
padding:4px 9px 4px 7px;
border-radius:7px;
font-size:10px;font-weight:900;letter-spacing:0.6px;
background: linear-gradient(135deg,
#00d4ff 0%,
#00ffa6 60%,
#7cffb2 100%);
color:#003322;
text-shadow: 0 1px 1px rgba(255,255,255,0.35);
box-shadow:
0 3px 10px rgba(0,200,255,0.45),
0 0 0 1px rgba(0,255,180,0.55) inset;
z-index:5;
pointer-events:none;
white-space:nowrap;
animation: ace-baru-pulse 2.6s ease-in-out infinite;
}
.ace-badge-baru span{font-size:11px;line-height:1}
@keyframes ace-baru-pulse{
0%, 100% { transform: scale(1); opacity:1 }
50% { transform: scale(1.06); opacity:.92 }
}
/* Mobile — slightly smaller badges so they don't crowd a 480px card.
* Both badges share the same top-right slot (under GARANSI RESMI). */
@media (max-width: 480px){
.ace-badge-terlaris,
.ace-badge-baru{
font-size:9px;
padding:3px 7px 3px 6px;
top:34px;
}
}
/* Respect reduced-motion users — kill the animations but keep the
* static gold ring + glow so the highlight still reads. */
@media (prefers-reduced-motion: reduce){
.ace-product-card.is-terlaris,
a.product.is-terlaris,
.ace-shine-comet,
.ace-badge-terlaris,
.ace-badge-baru{ animation: none !important }
}
/* ============== DARK PREMIUM PRODUCT IMAGE TEMPLATE ==============
*
* Adds a consistent "store-branded" frame around every product
* card without modifying the actual uploaded image files. Pure
* CSS overlay using pseudo-elements, so all 200+ products (and
* any new ones) inherit the same look instantly.
*
* Layers per card:
* 1. Subtle gold border (full card) → glows on hover
* 2. Diagonal gold corner accent (top-left of card)
* 3. GARANSI RESMI pill badge (top-right of image)
* 4. ACE SHOP wordmark watermark (bottom-right of image,
* semi-transparent gold so it doesn't fight the product)
* 5. Inner ring on image area (subtle gold edge so the white
* product background reads as "framed" instead of bare)
* 6. Gold accent line above the info section
* ================================================================ */
.ace-product-card{
/* Subtle gold default border + smooth gold halo on hover. */
border:1.5px solid rgba(212,175,55,.22) !important;
position:relative;
transition:transform .2s, border-color .2s, box-shadow .25s;
}
.ace-product-card:hover{
border-color:var(--gold) !important;
box-shadow:0 10px 28px rgba(212,175,55,.18), 0 2px 6px rgba(0,0,0,.4);
transform:translateY(-2px);
}
/* Diagonal gold corner accent — top-left. Pure CSS triangle via
* a clipped pseudo-element so we get a real diagonal edge. */
.ace-product-card::before{
content:'';
position:absolute;top:0;left:0;
width:46px;height:46px;
background:linear-gradient(135deg, var(--gold) 0%, var(--gold-2,#a08020) 55%, transparent 100%);
clip-path:polygon(0 0, 100% 0, 0 100%);
z-index:3;
pointer-events:none;
opacity:.95;
}
/* GARANSI RESMI pill — top-right of the image area. Uses
* pseudo-content so EVERY product gets the badge automatically,
* with no PHP / template changes. */
.ace-product-img::before{
content:'GARANSI RESMI';
position:absolute;
top:8px;right:8px;
background:linear-gradient(135deg, var(--gold), #a08020);
color:#000;
font-size:9px;font-weight:900;letter-spacing:.6px;
padding:3px 8px;border-radius:4px;
z-index:3;
box-shadow:0 2px 6px rgba(0,0,0,.35);
text-shadow:0 1px 0 rgba(255,255,255,.18);
white-space:nowrap;
}
/* ACE SHOP wordmark — bottom-right corner of image, semi-trans
* gold so it reads as a branded watermark rather than a label.
* White text-shadow makes it legible against light product bg. */
.ace-product-img::after{
content:'ACE SHOP';
position:absolute;
bottom:6px;right:8px;
color:rgba(140,100,20,.7);
font-size:9px;font-weight:900;
letter-spacing:1.5px;
z-index:3;
text-shadow:0 1px 0 rgba(255,255,255,.7);
pointer-events:none;
}
/* Subtle gold inner ring on the image so the white product bg
* doesn't look pasted-on against the dark card. */
.ace-product-img{
box-shadow:inset 0 0 0 1px rgba(212,175,55,.18), inset 0 -1px 0 rgba(212,175,55,.35);
}
/* Gold accent line dividing the image from the info card —
* extra signal that this is a branded card. */
.ace-product-info{
position:relative;
}
.ace-product-info::before{
content:'';
position:absolute;top:0;left:12%;right:12%;height:1px;
background:linear-gradient(90deg, transparent 0%, rgba(212,175,55,.55) 50%, transparent 100%);
}
/* Apply the same treatment to WC's native loop markup (used when
* the theme falls back to default WooCommerce templates). */
.woocommerce ul.products li.product{
position:relative;
border:1.5px solid rgba(212,175,55,.22) !important;
transition:transform .2s, border-color .2s, box-shadow .25s;
}
.woocommerce ul.products li.product:hover{
border-color:var(--gold) !important;
box-shadow:0 10px 28px rgba(212,175,55,.18), 0 2px 6px rgba(0,0,0,.4);
transform:translateY(-2px);
}
.woocommerce ul.products li.product::before{
content:'';
position:absolute;top:0;left:0;
width:46px;height:46px;
background:linear-gradient(135deg, var(--gold) 0%, var(--gold-2,#a08020) 55%, transparent 100%);
clip-path:polygon(0 0, 100% 0, 0 100%);
z-index:3;
pointer-events:none;
opacity:.95;
}
.woocommerce ul.products li.product::after{
content:'GARANSI RESMI';
position:absolute;
top:8px;right:8px;
background:linear-gradient(135deg, var(--gold), #a08020);
color:#000;
font-size:9px;font-weight:900;letter-spacing:.6px;
padding:3px 8px;border-radius:4px;
z-index:3;
box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.woocommerce ul.products li.product a{display:block;color:inherit;text-decoration:none}
.woocommerce ul.products li.product img{
margin:0 !important;background:#fff;
aspect-ratio:1;object-fit:contain;padding:14px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
padding:10px 12px 4px;font-size:13px;font-weight:600;
color:#fff !important;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;min-height:50px;
}
.woocommerce ul.products li.product .price{
padding:0 12px 8px;
color:var(--gold) !important;
font-size:15px;font-weight:800;
}
.woocommerce ul.products li.product .price del{
color:var(--text-dim);font-size:11px;font-weight:400;
}
.woocommerce ul.products li.product .button{
margin:0 12px 12px;background:var(--bg-3) !important;
color:#fff !important;border-radius:8px;font-size:12px !important;
padding:8px 12px !important;font-weight:600;
}
.woocommerce ul.products li.product .button:hover{
background:var(--gold) !important;color:#000 !important;
}
.woocommerce span.onsale{
background:var(--gold) !important;color:#000 !important;
border-radius:6px;font-size:10px;font-weight:800;
padding:3px 8px;min-height:0;line-height:1.2;
}
/* Override WooCommerce single product page */
.single-product div.product{padding:0 16px}
.single-product div.product .woocommerce-product-gallery{
background:#fff;border-radius:var(--radius);overflow:hidden;margin-bottom:14px;
}
.single-product div.product .product_title{
font-size:22px;font-weight:800;color:#fff;margin-bottom:8px;
}
.single-product div.product .price{
font-size:20px;font-weight:800;color:var(--gold);margin-bottom:14px;
}
.single-product div.product .stock{
font-size:14px;color:var(--text-dim);margin-bottom:12px;
}
.single-product div.product .single_add_to_cart_button{
background:linear-gradient(135deg,var(--gold),var(--gold-2)) !important;
color:#000 !important;border-radius:12px !important;
font-weight:800 !important;padding:14px 28px !important;
}
.single-product div.product .quantity .qty{
background:var(--bg-3);color:#fff;border:1px solid var(--line);
border-radius:8px;padding:10px;
}
/* WooCommerce notices */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
background:var(--bg-2);color:#fff;border-color:var(--gold);
border-radius:12px;padding:14px;margin:0 16px 14px;
}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{color:var(--gold)}
/* Cart & Checkout pages */
.woocommerce-cart .cart_totals,
.woocommerce-checkout .checkout_coupon,
.woocommerce-checkout #order_review{
background:var(--bg-2);border:1px solid var(--bg-3);
border-radius:14px;padding:16px;margin:0 16px 14px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
background:var(--bg-3);border:1px solid var(--bg-3);
color:#fff;border-radius:10px;padding:12px 14px;
}
.woocommerce table.shop_table{
background:var(--bg-2);border:1px solid var(--bg-3);
border-radius:12px;overflow:hidden;margin:0 16px;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{color:#fff;border-color:var(--bg-3) !important}
/* ============== CHECKOUT (WC BLOCK CHECKOUT) ============== */
.wp-block-woocommerce-checkout,
.wc-block-checkout{
color:var(--text);
}
.wc-block-checkout{padding:16px 0}
.wc-block-components-main{padding-right:8px}
.wc-block-components-sidebar{padding-left:8px}
/* Step cards */
.wc-block-components-checkout-step{
background:var(--bg-2) !important;
border:1px solid var(--bg-3) !important;
border-radius:14px !important;
padding:20px !important;
margin:0 0 14px !important;
box-shadow:none !important;
}
.wc-block-components-checkout-step::after{display:none !important}
.wc-block-components-checkout-step__heading{margin-bottom:14px !important}
.wc-block-components-checkout-step__title,
.wp-block-woocommerce-checkout h2,
.wp-block-woocommerce-checkout h3{
color:#fff !important;
font-size:16px !important;
font-weight:700 !important;
letter-spacing:-.1px;
margin:0 0 10px !important;
}
.wc-block-components-checkout-step__description,
.wc-block-checkout__guest-checkout-notice{
color:var(--text-dim) !important;
font-size:13px !important;
}
/* Inputs / selects / textareas — padding-top is generous so the floating
* label has room above the value when the field is filled. */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-textarea textarea,
.wc-block-components-combobox-control input,
.wc-block-components-combobox input,
.wc-block-components-form input[type="text"],
.wc-block-components-form input[type="email"],
.wc-block-components-form input[type="tel"],
.wc-block-components-form input[type="number"],
.wc-block-components-form select,
.wc-block-components-form textarea,
.wc-blocks-components-select__select,
.components-form-token-field__input{
background:var(--bg) !important;
border:1px solid var(--bg-3) !important;
color:#fff !important;
border-radius:10px !important;
padding:22px 14px 8px !important;
font-size:14px !important;
font-family:inherit !important;
box-shadow:none !important;
height:auto !important;
min-height:56px !important;
}
/* Floating label position so it sits in the top space we created above */
.wc-block-components-text-input{position:relative}
.wc-block-components-text-input label{
position:absolute !important;
top:18px !important;
left:14px !important;
font-size:14px !important;
color:var(--text-dim) !important;
pointer-events:none !important;
transition:transform .15s, color .15s, font-size .15s !important;
background:transparent !important;
padding:0 !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input:focus-within label{
transform:translateY(-12px) !important;
font-size:11px !important;
color:var(--gold) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus,
.wc-block-components-form input:focus,
.wc-block-components-form select:focus,
.wc-block-components-form textarea:focus{
border-color:var(--gold) !important;
outline:none !important;
box-shadow:0 0 0 1px var(--gold) inset !important;
}
/* Floating labels (WC Blocks pattern) */
.wc-block-components-text-input label,
.wc-block-components-combobox-control label,
.wc-block-components-checkbox label,
.wc-block-components-radio-control label{
color:var(--text-dim) !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input:focus-within label{
color:var(--gold) !important;
}
.wc-block-components-text-input::after{display:none !important}
/* Validation error */
.wc-block-components-validation-error{
color:#f08080 !important;
font-size:12px !important;
}
/* Country / state combobox dropdown */
.components-form-token-field__suggestions-list,
.wc-block-components-combobox-control__listbox{
background:var(--bg-2) !important;
border:1px solid var(--bg-3) !important;
color:#fff !important;
}
/* Sidebar / order summary card */
.wp-block-woocommerce-checkout-totals-block,
.wc-block-components-sidebar{
background:var(--bg-2);
border:1px solid var(--bg-3);
border-radius:14px;
padding:20px;
}
.wp-block-woocommerce-checkout-order-summary-block{
background:transparent !important;
border:none !important;
padding:0 !important;
}
.wc-block-components-order-summary{padding:0 !important;background:transparent !important}
.wc-block-components-order-summary-item{
border-bottom:1px solid var(--bg-3) !important;
padding:12px 0 !important;
}
.wc-block-components-order-summary-item:last-child{border-bottom:none !important}
.wc-block-components-order-summary-item__image img{
border-radius:8px;background:#fff;
}
.wc-block-components-product-name,
.wc-block-components-order-summary-item__title{
color:#fff !important;
font-weight:600 !important;
font-size:13px !important;
}
.wc-block-components-order-summary-item__quantity{
background:var(--gold) !important;
color:#000 !important;
border:none !important;
font-weight:700 !important;
}
.wc-block-components-product-metadata,
.wc-block-components-order-summary-item__description,
.wc-block-components-product-details{
color:var(--text-dim) !important;
font-size:12px !important;
}
/* Coupon collapsible */
.wc-block-components-totals-coupon,
.wc-block-components-panel{
background:transparent !important;
border-top:1px solid var(--bg-3) !important;
padding:10px 0 !important;
}
.wc-block-components-panel__button,
.wc-block-components-totals-coupon__button{
color:#fff !important;
font-size:14px !important;
font-weight:600 !important;
}
.wc-block-components-totals-coupon__form input{
background:var(--bg) !important;
border:1px solid var(--bg-3) !important;
color:#fff !important;
border-radius:8px !important;
}
/* Totals lines */
.wc-block-components-totals-item{
color:#fff !important;
font-size:14px !important;
padding:8px 0 !important;
border-bottom:none !important;
}
.wc-block-components-totals-item__label{
color:var(--text-dim) !important;
}
.wc-block-components-totals-item__value{
color:#fff !important;
font-weight:600 !important;
}
.wc-block-components-totals-footer-item{
font-size:18px !important;
font-weight:800 !important;
border-top:1px solid var(--bg-3) !important;
padding-top:14px !important;
margin-top:8px !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
color:#fff !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-formatted-money-amount,
.wc-block-components-totals-footer-item .woocommerce-Price-amount{
color:var(--gold) !important;
font-size:22px !important;
}
/* Payment radio cards — match the .ace-slot-shipping option style
* (custom radio dot, gold border + light gold bg when checked, flex
* layout with the label group beside the radio). */
.wc-block-components-radio-control__option{
display:flex !important;
align-items:flex-start !important;
gap:12px !important;
background:var(--bg) !important;
border:1.5px solid var(--bg-3) !important;
border-radius:10px !important;
padding:14px !important;
margin:0 0 10px !important;
color:#fff !important;
position:relative !important;
cursor:pointer !important;
transition:border-color .15s, background .15s !important;
}
.wc-block-components-radio-control__option:last-child{margin-bottom:0 !important}
.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control__option--checked{
border-color:var(--gold) !important;
background:rgba(212,175,55,.06) !important;
}
/* Payment-method block specifically: each method ships wrapped in a
* .wc-block-components-radio-control-accordion-option that holds the
* radio row AND an expanded content panel (description, Tripay
* picker, etc.). Default WC Blocks paints that wrapper with light
* borders/backgrounds, which on the dark theme reads as a "white
* box" around the option — Pilihan Pengiriman doesn't have this
* because we built it from custom HTML.
*
* Promote the visual card up to the wrapper so the gold selected
* border encompasses both the radio row and the expanded panel,
* matching the .ace-ship-opt look exactly. The inner option +
* accordion-content are then flattened so the wrapper owns the
* entire frame. */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option{
background:var(--bg) !important;
border:1.5px solid var(--bg-3) !important;
border-radius:10px !important;
margin:0 0 10px !important;
padding:0 !important;
overflow:hidden !important;
transition:border-color .15s, background .15s !important;
}
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option:last-child{
margin-bottom:0 !important;
}
/* Selected wrapper — gold frame around the full panel. Uses :has()
* (Chrome 105+ / Safari 15.4+ / Firefox 121+) so we don't need a JS
* shim to mirror the inner option's --checked class up to the
* parent. Browsers without :has() fall back to the inner option's
* gold border (kept below) which still flags the selected state. */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__option--checked),
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__option-checked){
border-color:var(--gold) !important;
background:rgba(212,175,55,.06) !important;
}
/* Inner option (radio + label row) — wrapper owns the frame now,
* so strip the inner border/background to avoid nested cards. */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option{
background:transparent !important;
border:0 !important;
border-radius:0 !important;
margin:0 !important;
}
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option-checked,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option--checked{
background:transparent !important;
border:0 !important;
}
/* Expanded content panel (description / Tripay picker) — sits flush
* inside the wrapper with no border of its own. */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-content{
background:transparent !important;
border:0 !important;
padding:0 14px 14px !important;
margin:0 !important;
}
.wc-block-components-radio-control__input,
.wc-block-components-radio-control__option > input[type="radio"]{
appearance:none !important;
-webkit-appearance:none !important;
position:relative !important;
margin:2px 0 0 !important;
width:18px !important;
height:18px !important;
border:2px solid var(--bg-3) !important;
border-radius:50% !important;
background:transparent !important;
cursor:pointer !important;
flex-shrink:0 !important;
transform:none !important;
top:auto !important;
left:auto !important;
}
.wc-block-components-radio-control__input:checked,
.wc-block-components-radio-control__option > input[type="radio"]:checked{
border-color:var(--gold) !important;
}
.wc-block-components-radio-control__input:checked::after,
.wc-block-components-radio-control__option > input[type="radio"]:checked::after{
content:'';
position:absolute;
top:50%;left:50%;
transform:translate(-50%, -50%);
width:8px;height:8px;
border-radius:50%;
background:var(--gold);
}
.wc-block-components-radio-control__option-layout,
.wc-block-components-radio-control__label-group{
flex:1 !important;
min-width:0 !important;
margin-left:0 !important;
padding-left:0 !important;
}
.wc-block-components-radio-control__label{
color:#fff !important;
font-size:14px !important;
font-weight:700 !important;
display:block !important;
margin-bottom:2px !important;
}
.wc-block-components-radio-control__description{
color:var(--text-dim) !important;
font-size:12px !important;
line-height:1.4 !important;
}
/* Style the payment block as a card matching the other ace-mobile-card
* slots (dark bg, border, header, padding). */
.wp-block-woocommerce-checkout-payment-block{
background:var(--bg-2) !important;
border:1px solid var(--bg-3) !important;
border-radius:14px !important;
padding:18px !important;
margin:0 0 14px !important;
}
.wp-block-woocommerce-checkout-payment-block .wc-block-components-checkout-step__title{
font-size:15px !important;
font-weight:700 !important;
color:#fff !important;
margin:0 0 12px !important;
}
/* Hide country selector — checkout is locked to Indonesia in functions.php */
.wc-block-components-country-input,
.wc-block-components-address-form__country,
[data-field-key="country"],
[data-fieldname="country"],
.wp-block-woocommerce-checkout-billing-address-block .wc-block-components-combobox:has([id*="country"]){
display:none !important;
}
/* Place Order button — full width gold */
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button{
background:linear-gradient(135deg, var(--gold), var(--gold-2)) !important;
color:#000 !important;
font-weight:800 !important;
font-size:15px !important;
padding:14px 24px !important;
border-radius:12px !important;
border:none !important;
text-transform:none !important;
letter-spacing:.3px !important;
width:100% !important;
height:auto !important;
min-height:50px !important;
cursor:pointer !important;
box-shadow:none !important;
transition:opacity .15s, transform .1s !important;
}
.wc-block-components-checkout-place-order-button:hover{opacity:.92 !important}
.wc-block-components-checkout-place-order-button:active{transform:scale(.985) !important}
.wc-block-components-checkout-place-order-button .wc-block-components-button__text{color:inherit !important}
/* Hide "Return to cart" link entirely (theme's bottom-nav already has Cart) */
.wc-block-components-checkout-return-to-cart-button,
.wp-block-woocommerce-checkout-actions-block .wc-block-components-button.wc-block-components-checkout-return-to-cart-button{
display:none !important;
}
/* The real WC actions block stays in the DOM (so its React click handler
* works) but is hidden — theme.js renders a mirror place-order button in
* the sidebar that forwards clicks to it. */
.wp-block-woocommerce-checkout-actions-block{
display:none !important;
}
.wc-block-checkout__actions{
display:none !important;
}
/* The mirror button rendered into the totals/sidebar block. */
.ace-place-order-mirror{
display:flex !important;
width:100% !important;
margin-top:16px !important;
padding-top:14px !important;
padding-bottom:14px !important;
align-items:center !important;
justify-content:center !important;
}
.wp-block-woocommerce-checkout-totals-block .ace-place-order-mirror,
.wc-block-components-sidebar .ace-place-order-mirror{
margin-top:18px !important;
}
/* ============== CHECKOUT WIZARD (3-step guided flow) ============
* Renders a stepper card before the payment block. When the wizard
* is mounted (body.ace-wizard-active), the standalone scattered UI
* for asuransi / voucher / saldo is hidden so the wizard is the
* single source of truth. See assets/checkout-wizard.js. */
#ace-checkout-wizard{order:22 !important}
.ace-wiz{
background:linear-gradient(135deg,#1a1a1a 0%,#0a0a0a 100%);
border:1px solid #d4af37;
border-radius:14px;
padding:16px 18px;
margin:14px 0;
color:#fff;
}
.ace-wiz-head{display:flex;gap:12px;align-items:flex-start;padding-bottom:14px;border-bottom:1px solid #2a2a2a;margin-bottom:12px}
.ace-wiz-icon{font-size:24px;line-height:1}
.ace-wiz-title{margin:0;font-size:15px;font-weight:800;color:#d4af37;letter-spacing:.3px}
.ace-wiz-subtitle{margin:2px 0 0;font-size:12px;color:#bbb;line-height:1.4}
.ace-wiz-step{padding:12px 0;border-bottom:1px solid #1a1a1a}
.ace-wiz-step:last-of-type{border-bottom:none}
.ace-wiz-step-head{display:flex;gap:10px;align-items:center}
.ace-wiz-step-num{
width:26px;height:26px;border-radius:50%;
background:#2a2a2a;color:#888;
display:inline-flex;align-items:center;justify-content:center;
font-weight:700;font-size:13px;flex-shrink:0;
transition:background .15s,color .15s;
}
.ace-wiz-step[data-state=active] .ace-wiz-step-num{background:#d4af37;color:#000}
.ace-wiz-step[data-state=done] .ace-wiz-step-num{background:#4ade80;color:#000}
.ace-wiz-step[data-state=done] .ace-wiz-step-num::before{content:'✓'}
.ace-wiz-step[data-state=done] .ace-wiz-step-num{font-size:0}
.ace-wiz-step[data-state=done] .ace-wiz-step-num::before{font-size:14px}
.ace-wiz-step-titles{flex:1;min-width:0}
.ace-wiz-step-title{font-size:14px;font-weight:700;color:#fff}
.ace-wiz-step[data-state=locked] .ace-wiz-step-title{color:#666}
/* "Wajib" badge that sits next to "Asuransi Pengiriman" when shop
* policy forces insurance ON (luar Jawa or cart > Rp 10jt). */
.ace-wiz-required-badge{
display:inline-block;
font-size:9.5px;font-weight:900;
letter-spacing:0.6px;
padding:2px 7px;
margin-left:8px;
border-radius:5px;
background:linear-gradient(135deg,#ff4757,#e02020);
color:#fff;
text-shadow:0 1px 1px rgba(0,0,0,0.3);
box-shadow:0 1px 3px rgba(229,32,32,0.4);
vertical-align:middle;
}
.ace-wiz-step-summary{font-size:12px;color:#4ade80;margin-top:2px}
.ace-wiz-step-summary:empty{display:none}
/* (Per-step "Batalkan" buttons removed — see assets/checkout-wizard.js.
* Reset goes through the "Mulai Ulang" button at the bottom of the
* wizard which reloads the page and lets the server-side reset
* handler clear all three pieces of state atomically.) */
.ace-wiz-step-body{margin-top:12px}
.ace-wiz-step-body[hidden]{display:none}
.ace-wiz-step-desc{font-size:12px;color:#aaa;line-height:1.5;margin:0 0 12px}
.ace-wiz-step-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ace-wiz-btn{
padding:9px 16px;border:none;border-radius:8px;cursor:pointer;
font-weight:700;font-size:13px;letter-spacing:.2px;
transition:opacity .15s,transform .1s;
}
.ace-wiz-btn:hover{opacity:.92}
.ace-wiz-btn:active{transform:scale(.97)}
.ace-wiz-btn-primary{background:#d4af37;color:#000}
.ace-wiz-btn-secondary{background:#2a2a2a;color:#fff;border:1px solid #3a3a3a}
.ace-wiz-btn-tiny{padding:5px 10px;font-size:11px;background:#d4af37;color:#000}
/* Voucher list inside step 2 — Shopee/Tokopedia-style ticket cards.
* Each card has a perforated left edge (ticket stub illusion via
* radial gradient mask), gold accent, and an obvious tap target. */
.ace-wiz-voucher-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.ace-wiz-voucher-row{
position:relative;
display:flex;align-items:center;gap:14px;
width:100%;min-height:74px;
padding:12px 14px 12px 56px;
background:linear-gradient(135deg,#1a1410 0%,#0f0d08 60%,#1a1410 100%);
border:1.5px solid #d4af37;border-radius:10px;
cursor:pointer;text-align:left;color:#fff;
font-family:inherit;
box-shadow:0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(212,175,55,.15);
transition:transform .15s,box-shadow .15s,border-color .15s;
overflow:hidden;
}
.ace-wiz-voucher-row::before{
/* Left-edge "stub" with a gradient highlight + ticket icon */
content:'🎟';
position:absolute;
top:0;left:0;bottom:0;width:46px;
display:flex;align-items:center;justify-content:center;
font-size:22px;
background:linear-gradient(135deg,#d4af37 0%,#a08020 100%);
color:#000;
border-right:2px dashed rgba(0,0,0,.4);
}
.ace-wiz-voucher-row::after{
/* Subtle "klik" arrow on the right edge */
content:'›';
position:absolute;right:14px;top:50%;transform:translateY(-50%);
font-size:22px;color:#d4af37;font-weight:900;line-height:1;
transition:transform .15s;
}
.ace-wiz-voucher-row:hover{
transform:translateY(-2px);
box-shadow:0 6px 16px rgba(212,175,55,.25),inset 0 1px 0 rgba(212,175,55,.3);
border-color:#fff;
}
.ace-wiz-voucher-row:hover::after{transform:translateY(-50%) translateX(4px)}
.ace-wiz-voucher-row:active{transform:translateY(0)}
.ace-wiz-voucher-code{
font-weight:900;color:#d4af37;
font-size:14px;font-family:Menlo,Consolas,monospace;
text-transform:uppercase;letter-spacing:.5px;
text-shadow:0 0 8px rgba(212,175,55,.4);
}
/* Hidden by request — the code itself (GRATISONGKIR) is already
* self-explanatory so the white "Gratis Ongkir" label below was
* redundant. JS still renders the element so future coupons can
* un-hide via a custom class if needed. */
.ace-wiz-voucher-label{display:none}
.ace-wiz-voucher-hint{font-size:11px;color:#bbb;margin-top:3px;line-height:1.4;padding-right:16px}
.ace-wiz-voucher-empty{
padding:18px;text-align:center;color:#888;font-size:12px;
background:#0a0a0a;border-radius:10px;border:1px dashed #2a2a2a;
}
.ace-wiz-voucher-manual{display:flex;gap:8px;margin-bottom:10px;align-items:stretch}
.ace-wiz-voucher-input{
flex:1;background:#0a0a0a;border:1px solid #2a2a2a;color:#fff;
padding:8px 12px;border-radius:8px;font-size:13px;min-width:0;
}
.ace-wiz-voucher-input:focus{outline:none;border-color:#d4af37}
.ace-wiz-voucher-msg{font-size:12px;padding:8px 10px;border-radius:6px;margin:6px 0;background:#1a1a1a}
.ace-wiz-voucher-msg.is-ok{background:rgba(74,222,128,.12);color:#4ade80;border:1px solid rgba(74,222,128,.3)}
.ace-wiz-voucher-msg.is-err{background:rgba(248,113,113,.12);color:#f87171;border:1px solid rgba(248,113,113,.3)}
/* Saldo input inside step 3 — drop every height / line-height
* override on the input and let it take its intrinsic size, then
* vertically center the input as a box inside the row via
* align-self:center. The browser handles the text-Y inside the
* input natively without any input-specific overrides, so the
* font's true vertical metrics determine the final position
* (no manual values to drift one way or the other). */
.ace-wiz-saldo-input{
display:flex;align-items:center;
background:#0a0a0a;border:1px solid #2a2a2a;border-radius:8px;
overflow:hidden;max-width:260px;margin-bottom:10px;
height:40px;
}
.ace-wiz-saldo-prefix{
align-self:stretch;
display:flex;align-items:center;justify-content:center;
padding:0 12px;background:#2a2a2a;color:#888;
font-size:13px;font-weight:700;
box-sizing:border-box;
}
/* All previous adjustments lost to a WC Blocks rule with
* !important: `.wc-block-components-form input[type="text"]`
* sets padding:22px 14px 8px (floating-label style with 22px
* reserved at top!) + min-height:56px. That's why the text kept
* landing wherever the 22px top padding pushed it, and the row
* was always taller than my height value.
*
* Bump specificity to match (class + element + class = 0,2,1)
* AND add !important on every property we override. Source-order
* tiebreak favors style.css (loaded after WC Blocks CSS) so the
* tie goes to us. */
.ace-wiz-saldo-input input.ace-wiz-saldo-amount{
flex:1 !important;
align-self:center !important;
background:transparent !important;
border:none !important;
border-radius:0 !important;
color:#fff !important;
font-family:Menlo,monospace !important;
font-size:14px !important;
font-weight:700 !important;
padding:6px 10px !important;
margin:0 !important;
min-height:0 !important;
height:auto !important;
min-width:0 !important;
outline:none !important;
text-align:center !important;
box-shadow:none !important;
line-height:normal !important;
}
.ace-wiz-saldo-input > .ace-wiz-btn-tiny{
align-self:stretch;
display:flex;align-items:center;justify-content:center;
padding:0 14px;font-size:11px;font-weight:800;
border:none;border-radius:0;
box-sizing:border-box;
}
.ace-wiz-saldo-msg{font-size:12px;padding:8px 10px;border-radius:6px;margin:6px 0;background:#1a1a1a}
.ace-wiz-saldo-msg.is-ok{background:rgba(74,222,128,.12);color:#4ade80;border:1px solid rgba(74,222,128,.3)}
.ace-wiz-saldo-msg.is-err{background:rgba(248,113,113,.12);color:#f87171;border:1px solid rgba(248,113,113,.3)}
/* Locked step appearance */
.ace-wiz-step[data-state=locked] .ace-wiz-step-head{opacity:.45}
.ace-wiz-step[data-state=locked] .ace-wiz-step-body{opacity:.45;pointer-events:none}
/* Completion banner + Mulai Ulang button removed — the outer
* checkout stepper handles advancement to the payment step on
* wizard completion via body.ace-wizard-done, so the in-card
* banner became redundant. Restart now happens via a page
* refresh, same flow as the rest of the stepper.
* (Old selectors: .ace-wiz-complete, .ace-wiz-restart,
* .ace-wiz-restart-hint) */
/* When wizard is active, hide the scattered UI it replaces — the
* wizard becomes the single source of truth for asuransi /
* voucher / saldo so the buyer can't switch back-and-forth and
* trigger the coupon/saldo race-conditions that motivated this
* whole feature. */
body.ace-wizard-active .ace-insurance-row,
body.ace-wizard-active #ace-saldo-checkout-mount,
body.ace-wizard-active .ace-slot-voucher,
body.ace-wizard-active .ace-promo-trigger,
body.ace-wizard-active .ace-promo-active-banner{
display:none !important;
}
/* Lock the Place Order button until the wizard is complete. WC
* Blocks renders the button as