@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap");
:root {
--wac-red:       #E51A1A;
--wac-red-dark:  #C01212;
--wac-red-soft:  #FFF0F0;
--wac-red-border:#FFD0D0;
--wac-wa:        #25D366;
--wac-wa-dark:   #1EB057;
--wac-text:      #1A1A1A;
--wac-muted:     #6B7280;
--wac-bg:        #FBF9F7;
--wac-white:     #FFFFFF;
--wac-border:    #EDE8E3;
--wac-shadow:    0 2px 8px rgba(0,0,0,.07);
--wac-r:         12px;
--wac-r-sm:      8px;
--wac-font:      'Nunito','Helvetica Neue',Arial,sans-serif;
}
.wac-checkout *, .wac-checkout *::before, .wac-checkout *::after { box-sizing: border-box; }
.wac-checkout { font-family: var(--wac-font); color: var(--wac-text); background: var(--wac-bg);
-webkit-font-smoothing: antialiased; padding-bottom: 100px; } .wac-header { text-align: center; padding: 20px 16px 4px; }
.wac-logo { height: auto; margin: 0 auto 12px; display: block; }
.wac-title { font-size: clamp(1.4rem,4vw,2.2rem); font-weight: 900; color: var(--wac-red); margin: 0 0 4px;
letter-spacing: -1px; text-transform: uppercase; }
.wac-subtitle { font-size: .9rem; color: var(--wac-muted); margin: 0 0 16px; font-weight: 600; } .wac-layout { max-width: 900px; margin: 0 auto; padding: 0 14px; } .wac-category { margin-top: 28px; }
.wac-cat-header { margin-bottom: 12px; }
.wac-cat-desc { font-size: .8rem; color: var(--wac-muted); margin: 0 0 4px; }
@media(max-width:480px){ .wac-cat-desc { font-size:.75rem; } }
.wac-cat-title { font-size: 1.1rem; font-weight: 800; margin: 0;
display: flex; align-items: center; gap: 8px; padding-bottom: 10px;
border-bottom: 3px solid var(--wac-red); }
.wac-cat-icon { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.wac-cat-count { margin-left: auto; font-size: .72rem; font-weight: 600; color: var(--wac-muted);
background: var(--wac-border); padding: 2px 9px; border-radius: 100px; } .wac-products { display: grid; gap: 12px; }
.wac-cols-1 { grid-template-columns: 1fr; }
.wac-cols-2 { grid-template-columns: repeat(2,1fr); }
.wac-cols-3 { grid-template-columns: repeat(3,1fr); }
.wac-cols-4 { grid-template-columns: repeat(4,1fr); } @media(max-width:620px){
.wac-cols-3,.wac-cols-4{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:480px){ .wac-cols-2,.wac-cols-3,.wac-cols-4{ grid-template-columns:1fr; }
[data-mobile-cols="2"] .wac-cols-2,
[data-mobile-cols="2"] .wac-cols-3,
[data-mobile-cols="2"] .wac-cols-4{ grid-template-columns:repeat(2,1fr); }
} .wac-product-card { background: var(--wac-white); border: 1.5px solid var(--wac-border); border-radius: var(--wac-r);
overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--wac-shadow);
transition: border-color .2s, box-shadow .2s, transform .15s; }
.wac-product-card.is-selected { border-color: var(--wac-red); box-shadow: 0 0 0 3px rgba(229,26,26,.12); }
.wac-product-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.wac-product-img { aspect-ratio: 4/3; overflow: hidden; background: #F3F0EC; }
.wac-product-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.wac-product-card:hover .wac-product-img img { transform:scale(1.04); }
.wac-product-info { padding: 11px 12px 12px; display:flex; flex-direction:column; flex:1; }
.wac-product-name { font-size:.875rem; font-weight:700; line-height:1.35; margin:0 0 3px; }
.wac-product-desc { font-size:.76rem; color:var(--wac-muted); margin:0 0 10px; line-height:1.4; flex:1; }
.wac-product-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; flex-wrap:wrap; }
.wac-product-price { font-size:.9rem; font-weight:800; color:var(--wac-red); white-space:nowrap; } .wac-img-thumb-strip { display:flex; gap:4px; padding:6px 8px 6px; background:rgba(255,255,255,.85); border-top:1px solid var(--wac-border); overflow-x:auto; scrollbar-width:none; }
.wac-img-thumb-strip::-webkit-scrollbar { display:none; }
.wac-img-thumb { width:38px;height:38px;flex-shrink:0;border-radius:6px;overflow:hidden;border:2px solid transparent;cursor:pointer;transition:border-color .15s,transform .15s; }
.wac-img-thumb:hover { transform:scale(1.08); }
.wac-img-thumb.is-active { border-color:var(--wac-red); }
.wac-img-thumb img { width:100%;height:100%;object-fit:cover; }
.wac-product-img[data-has-gallery="1"] { position:relative; }
.wac-product-img[data-has-gallery="1"] .wac-img-main { aspect-ratio:4/3; } .wac-thumb-btn { position:absolute; top:50%; transform:translateY(-50%); z-index:2;
background:rgba(255,255,255,.9); border:1.5px solid var(--wac-border);
border-radius:50%; width:28px; height:28px; cursor:pointer; display:flex;
align-items:center; justify-content:center; font-size:14px; color:#333;
box-shadow:0 1px 4px rgba(0,0,0,.15); transition:background .15s; }
.wac-thumb-btn:hover { background:#fff; }
.wac-thumb-prev { left:4px; }
.wac-thumb-next { right:4px; } .wac-qty-control { display:inline-flex; align-items:center; justify-content:center;
background:var(--wac-bg); border:1.5px solid var(--wac-border); border-radius:100px; padding:3px; gap:0;
line-height:1; }
.wac-product-card.is-selected .wac-qty-control { border-color:var(--wac-red-border); }
.wac-qty-btn {
display:flex; align-items:center; justify-content:center;
width:32px; height:32px; flex-shrink:0;
background:none; border:none; border-radius:50%;
color:var(--wac-text); cursor:pointer; padding:0;
position:relative; overflow:hidden;
transition:background .15s,color .15s,transform .1s;
} .wac-qty-btn.wac-minus::before {
content:''; position:absolute;
width:14px; height:2px;
background:currentColor; border-radius:1px;
} .wac-qty-btn.wac-plus::before {
content:''; position:absolute; width:14px; height:2px;
background:currentColor; border-radius:1px;
}
.wac-qty-btn.wac-plus::after {
content:''; position:absolute; width:2px; height:14px;
background:currentColor; border-radius:1px;
}
.wac-qty-btn:hover { background:var(--wac-red); color:#fff; }
.wac-qty-btn:active { transform:scale(.88); background:var(--wac-red-dark); color:#fff; }
.wac-qty-btn:focus-visible { outline:2px solid var(--wac-red); outline-offset:1px; }
.wac-qty-display {
min-width:36px; height:32px;
display:flex; align-items:center; justify-content:center;
text-align:center; font-size:.95rem; font-weight:800;
color:var(--wac-text); user-select:none; padding:0 4px;
} .wac-variation-wrap { width:100%; display:flex; flex-direction:column; gap:8px; }
.wac-variation-select { width:100%; border:1.5px solid var(--wac-border); border-radius:var(--wac-r-sm);
padding:7px 28px 7px 10px; font-size:.82rem; font-weight:600; font-family:var(--wac-font);
color:var(--wac-text); background:var(--wac-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
cursor:pointer; outline:none; appearance:none; transition:border-color .2s; }
.wac-variation-select:focus { border-color:var(--wac-red); box-shadow:0 0 0 3px rgba(229,26,26,.1); }
.wac-variable-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.wac-var-price { font-size:.82rem; color:var(--wac-muted); }
.wac-var-price.has-price { color:var(--wac-red); font-size:.9rem; font-weight:800; } .wac-order-bar { position:fixed; bottom:0; left:0; right:0; z-index:1000; background:var(--wac-white);
border-top:2px solid var(--wac-border); box-shadow:0 -4px 24px rgba(0,0,0,.12);
padding:10px 16px; transform:translateY(100%); transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.wac-order-bar.is-visible { transform:translateY(0); }
.wac-order-bar-inner { max-width:900px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.wac-order-summary { display:flex; flex-direction:column; gap:1px; }
.wac-item-count { font-size:.75rem; color:var(--wac-muted); font-weight:600; }
.wac-total-label { font-size:.9rem; font-weight:700; }
.wac-total-price { color:var(--wac-red); font-size:1.05rem; }
.wac-shipping-note { font-size:.7rem; color:var(--wac-muted); }
.wac-checkout-btn { background:var(--wac-wa); color:#fff; border:none; border-radius:100px;
padding:11px 24px; font-size:.88rem; font-weight:800; font-family:var(--wac-font);
cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center;
transition:background .2s,transform .15s; box-shadow:0 4px 14px rgba(37,211,102,.35); letter-spacing:.02em; }
.wac-checkout-btn:hover:not(:disabled) { background:var(--wac-wa-dark); transform:scale(1.03); }
.wac-checkout-btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; } .wac-modal-overlay { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.5); backdrop-filter:blur(3px);
display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s; }
.wac-modal-overlay.is-open { opacity:1; pointer-events:all; }
.wac-modal-box { background:var(--wac-white); border-radius:var(--wac-r) var(--wac-r) 0 0;
width:100%; max-width:520px; max-height:94vh; overflow-y:auto;
padding:22px 18px 36px; position:relative; transform:translateY(40px);
transition:transform .3s cubic-bezier(.34,1.3,.64,1); }
.wac-modal-overlay.is-open .wac-modal-box { transform:translateY(0); }
.wac-modal-box h2 { font-size:1.2rem; font-weight:900; margin:0 0 12px; }
.wac-modal-close { position:absolute; top:14px; right:14px; background:var(--wac-border); border:none;
border-radius:50%; width:28px; height:28px; font-size:.8rem; cursor:pointer; display:flex;
align-items:center; justify-content:center; color:var(--wac-muted); }
.wac-modal-close:hover { background:#ddd; } .wac-order-recap { background:var(--wac-red-soft); border:1.5px solid var(--wac-red-border);
border-radius:var(--wac-r-sm); padding:10px 12px; margin-bottom:10px;
font-size:.81rem; line-height:1.7; max-height:160px; overflow-y:auto; }
.wac-recap-item { display:grid; grid-template-columns:1fr auto auto; gap:6px; align-items:center; }
.wac-recap-item span:nth-child(2) { color:var(--wac-muted); font-size:.78rem; }
.wac-recap-item span:last-child { font-weight:800; color:var(--wac-red); white-space:nowrap; text-align:right; }
.wac-form-total { display:flex; justify-content:space-between; align-items:center;
font-size:.92rem; font-weight:700; border-top:1.5px solid var(--wac-border);
padding-top:10px; margin-bottom:4px; }
.wac-modal-total { color:var(--wac-red); font-size:1.05rem; }
.wac-shipping-reminder { font-size:.75rem; color:var(--wac-muted); margin:0 0 14px; }
.wac-form-divider { font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
color:var(--wac-muted); border-bottom:1.5px solid var(--wac-border); padding-bottom:6px; margin-bottom:12px; } .wac-form-group { margin-bottom:12px; }
.wac-form-group label { display:block; font-size:.8rem; font-weight:700; margin-bottom:4px; }
.wac-form-group .req { color:var(--wac-red); }
.wac-form-group input:not([type=hidden]),
.wac-form-group select,
.wac-form-group textarea {
width:100%; border:1.5px solid var(--wac-border); border-radius:var(--wac-r-sm);
padding:9px 11px; font-size:.875rem; font-family:var(--wac-font); color:var(--wac-text);
background:var(--wac-white); outline:none; transition:border-color .2s;
}
.wac-form-group input:focus, .wac-form-group select:focus, .wac-form-group textarea:focus {
border-color:var(--wac-red); box-shadow:0 0 0 3px rgba(229,26,26,.1);
}
.wac-form-group textarea { resize:vertical; } .wac-location-group { position:relative; }
.wac-location-wrap { position:relative; }
.wac-location-dropdown {
position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:100;
background:var(--wac-white); border:1.5px solid var(--wac-border);
border-radius:var(--wac-r-sm); box-shadow:0 8px 24px rgba(0,0,0,.12);
max-height:220px; overflow-y:auto;
}
.wac-loc-option { padding:10px 12px; font-size:.83rem; cursor:pointer;
border-bottom:1px solid var(--wac-border); line-height:1.4; }
.wac-loc-option:last-child { border-bottom:none; }
.wac-loc-option:hover { background:var(--wac-red-soft); color:var(--wac-red); font-weight:600; }
.wac-loc-hint { padding:10px 12px; font-size:.82rem; color:var(--wac-muted); }
.wac-loc-loading { color:var(--wac-red); }
.wac-location-selected { font-size:.82rem; font-weight:700; color:#15803d;
background:#f0fdf4; border:1.5px solid #bbf7d0; border-radius:var(--wac-r-sm);
padding:8px 12px; margin-top:6px; } .wac-submit-btn { width:100%; background:var(--wac-wa); color:#fff; border:none;
border-radius:100px; padding:15px 24px; font-size:.95rem; font-weight:800;
font-family:var(--wac-font); cursor:pointer; display:flex; align-items:center;
justify-content:center; gap:8px; transition:background .2s, transform .15s;
box-shadow:0 4px 16px rgba(37,211,102,.35); margin-top:8px; }
.wac-submit-btn:hover:not(:disabled) { background:var(--wac-wa-dark); transform:scale(1.02); }
.wac-submit-btn:disabled { opacity:.6; cursor:not-allowed; }
.wac-error-msg { background:#FEE2E2; border:1px solid #FECACA; border-radius:var(--wac-r-sm);
padding:10px 14px; color:#DC2626; font-size:.83rem; font-weight:600; margin-top:10px; } .wac-modal-box::-webkit-scrollbar, .wac-order-recap::-webkit-scrollbar, .wac-location-dropdown::-webkit-scrollbar { width:4px; }
.wac-modal-box::-webkit-scrollbar-thumb, .wac-order-recap::-webkit-scrollbar-thumb, .wac-location-dropdown::-webkit-scrollbar-thumb { background:var(--wac-border); border-radius:4px; }
.wac-empty { text-align:center; padding:56px 24px; color:var(--wac-muted); } .wac-pd-overlay {
position:fixed; inset:0; z-index:99999;
background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
display:flex; align-items:flex-end; justify-content:center;
opacity:0; pointer-events:none; transition:opacity .25s;
}
.wac-pd-overlay.is-open { opacity:1; pointer-events:all; }
.wac-pd-box {
background:var(--wac-white); border-radius:var(--wac-r) var(--wac-r) 0 0;
width:100%; max-width:520px; max-height:92vh; overflow-y:auto;
padding:0; position:relative;
transform:translateY(60px); transition:transform .35s cubic-bezier(.34,1.3,.64,1);
}
.wac-pd-overlay.is-open .wac-pd-box { transform:translateY(0); }
.wac-pd-close {
position:absolute; top:12px; right:12px; z-index:10;
background:rgba(255,255,255,.9); border:1px solid rgba(0,0,0,.1);
border-radius:50%; width:32px; height:32px; font-size:.9rem;
cursor:pointer; display:flex; align-items:center; justify-content:center;
color:#333; backdrop-filter:blur(4px);
}
.wac-pd-close:hover { background:#fff; }  .wac-pd-main-img-wrap { position:relative; display:flex; align-items:center; }
.wac-pd-main-img {
width:100%; background:#F3F0EC; position:relative; overflow:hidden;
}
.wac-pd-main-img img {
width:100%; max-height:320px; object-fit:cover; display:block;
}
.wac-pd-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:3;
background:rgba(255,255,255,.9); border:none; border-radius:50%;
width:34px; height:34px; font-size:1rem; cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:background .15s,transform .15s; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.wac-pd-arrow:hover { background:#fff; transform:translateY(-50%) scale(1.1); }
.wac-pd-prev { left:8px; }
.wac-pd-next { right:8px; }
.wac-pd-dots { display:flex; justify-content:center; gap:6px; padding:10px 12px;
position:absolute; bottom:0; left:0; right:0; z-index:2;
background:linear-gradient(transparent, rgba(0,0,0,.25)); pointer-events:none; }
.wac-pd-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.65);
cursor:pointer; transition:background .2s,transform .2s; pointer-events:all; }
.wac-pd-dot.is-active { background:#fff; transform:scale(1.3); } .wac-pd-info { padding:16px 18px 28px; }
.wac-pd-name { font-size:1.2rem; font-weight:900; color:var(--wac-text); margin:0 0 10px; line-height:1.3; padding-right:36px; }
.wac-pd-desc {
font-size:.83rem; color:var(--wac-muted); line-height:1.6;
background:var(--wac-bg); border-radius:var(--wac-r-sm);
padding:10px 12px; margin-bottom:14px; max-height:120px; overflow-y:auto;
}
.wac-pd-no-desc { color:var(--wac-muted); font-style:italic; margin:0; }
.wac-pd-row { margin-bottom:12px; }
.wac-pd-row label { display:block; font-size:.78rem; font-weight:700; color:var(--wac-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; }
.wac-pd-hidden { display:none; }
.wac-pd-variation-select {
width:100%; border:1.5px solid var(--wac-border); border-radius:var(--wac-r-sm);
padding:9px 32px 9px 12px; font-size:.875rem; font-weight:600;
background:var(--wac-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
appearance:none; cursor:pointer; color:var(--wac-text);
}
.wac-pd-variation-select:focus { border-color:var(--wac-red); outline:none; }
.wac-pd-price-row {
display:flex; justify-content:space-between; align-items:flex-start;
margin-bottom:14px; gap:12px;
}
.wac-pd-price-label, .wac-pd-stock-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--wac-muted); margin-bottom:2px; }
.wac-pd-price { font-size:1.15rem; font-weight:900; color:var(--wac-red); }
.wac-pd-price:not(.has-price) { color:var(--wac-muted); font-size:.9rem; font-weight:600; }
.wac-pd-stock { font-size:.82rem; font-weight:700; }
.wac-pd-stock.in-stock { color:#15803d; }
.wac-pd-stock.out-of-stock { color:#dc3232; }
.wac-pd-qty-row {
display:flex; align-items:center; justify-content:space-between;
background:var(--wac-bg); border:1.5px solid var(--wac-border);
border-radius:var(--wac-r-sm); padding:10px 14px; margin-bottom:14px;
}
.wac-pd-qty-control { display:flex; align-items:center; gap:2px; }
.wac-pd-qty-btn {
width:32px; height:32px; min-height:32px; flex-shrink:0; border:1.5px solid var(--wac-border);
background:var(--wac-white); border-radius:50%; font-size:0; line-height:0;
cursor:pointer; display:flex; align-items:center;
justify-content:center; color:var(--wac-muted); transition:all .15s; position:relative;
}
.wac-pd-qty-btn::before { content:''; display:block; width:14px; height:2px; background:currentColor; border-radius:1px; }
.wac-pd-qty-btn.wac-pd-qty-plus::after { content:''; position:absolute; left:50%; top:50%; width:2px; height:14px; background:currentColor; border-radius:1px; transform:translate(-50%,-50%); }
.wac-pd-qty-btn:hover { background:var(--wac-red); color:#fff; border-color:var(--wac-red); }
.wac-pd-qty-display { min-width:40px; height:32px; text-align:center; font-size:1rem; font-weight:900; padding:0 4px; display:flex; align-items:center; justify-content:center; }
.wac-pd-total-wrap { text-align:right; }
.wac-pd-total-label { display:block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--wac-muted); margin-bottom:1px; }
.wac-pd-total { font-size:1.1rem; font-weight:900; color:var(--wac-text); }
.wac-pd-add-btn {
width:100%; background:var(--wac-wa); color:#fff; border:none;
border-radius:100px; padding:14px 20px; font-size:.95rem; font-weight:800;
font-family:var(--wac-font); cursor:pointer;
display:flex; align-items:center; justify-content:center; gap:8px;
box-shadow:0 4px 14px rgba(37,211,102,.35); transition:background .2s, transform .15s;
}
.wac-pd-add-btn:hover { background:var(--wac-wa-dark); transform:scale(1.02); }
@media(max-width:480px){
.wac-pd-box { max-height:95vh; }
.wac-pd-main-img img { max-height:240px; }
}