/* Shared styles for the cart, checkout and thank-you pages, plus the cart button and popup. */
/* Colors from the back of the One in a Million card (--pink now holds the card's red highlight) */
:root { --green: #03a2a8; --teal-dk: #174d59; --char: #262628; --blue: #1d5f80; --gold: #caa570; --yellow: #f3ba2d; --pink: #df4132; --white: #fff; --ink: #1f2a2e; --line: #e1e6e7; }
* { box-sizing: border-box; }
body { margin: 0; font-family: Montserrat, sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
a { color: inherit; }

/* Floating cart button (all pages) */
.cart-link { position: fixed; top: 18px; right: 18px; z-index: 50; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 300px; background: var(--pink); color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.18); transition: transform .15s; }
.cart-link:hover { transform: translateY(-1px); }
.cart-link svg { width: 20px; height: 20px; }
.cart-link .count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #fff; color: var(--pink); font-size: 12px; line-height: 20px; text-align: center; }
.cart-link:not(.has-items) .count { display: none; }

/* "Added to cart" popup */
#oiam-added { position: fixed; top: 76px; right: 18px; z-index: 60; width: 340px; max-width: calc(100vw - 32px); background: var(--teal-dk); border: 2px solid var(--gold); color: #fff; padding: 20px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); animation: oiamIn .2s ease-out; }
#oiam-added-overlay { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.3); animation: oiamFade .2s ease-out; }
@keyframes oiamIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes oiamFade { from { opacity: 0; } to { opacity: 1; } }
#oiam-added .head { display: flex; justify-content: space-between; align-items: center; color: var(--yellow); font-weight: 700; font-size: 15px; margin-bottom: 14px; }
#oiam-added .x { background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 2px; }
#oiam-added .item { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
#oiam-added .item img { width: 54px; height: 54px; object-fit: contain; flex: none; }
#oiam-added .item .name { font-weight: 700; font-size: 14px; }
#oiam-added .item .meta { font-size: 12px; opacity: .9; margin-top: 3px; }
#oiam-added .item .price { margin-left: auto; font-weight: 700; font-size: 14px; }
#oiam-added .btns { display: flex; gap: 8px; }
#oiam-added .btns a { flex: 1; text-align: center; padding: 11px 8px; border-radius: 300px; border: 1px solid #fff; text-decoration: none; font-size: 13px; font-weight: 500; color: #fff; }
#oiam-added .btns a.solid { background: #fff; color: var(--teal-dk); }
@media (max-width: 767px) {
  #oiam-added { top: auto; bottom: 0; right: 0; left: 0; width: auto; max-width: none; border-radius: 14px 14px 0 0; }
  #oiam-added .btns { flex-direction: column; }
}

/* Shop pages */
.shop-head { background: var(--char) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><path d='M0 -19L19 0L0 19L-19 0Z' fill='none' stroke='%232a2a2c' stroke-width='3.2'/><path d='M0 0L9.5 9.5L0 19L-9.5 9.5Z' fill='%232a2a2c'/><path d='M60 -19L79 0L60 19L41 0Z' fill='none' stroke='%232a2a2c' stroke-width='3.2'/><path d='M60 0L69.5 9.5L60 19L50.5 9.5Z' fill='%232a2a2c'/><path d='M0 41L19 60L0 79L-19 60Z' fill='none' stroke='%232a2a2c' stroke-width='3.2'/><path d='M0 60L9.5 69.5L0 79L-9.5 69.5Z' fill='%232a2a2c'/><path d='M60 41L79 60L60 79L41 60Z' fill='none' stroke='%232a2a2c' stroke-width='3.2'/><path d='M60 60L69.5 69.5L60 79L50.5 69.5Z' fill='%232a2a2c'/><path d='M30 11L49 30L30 49L11 30Z' fill='none' stroke='%232a2a2c' stroke-width='3.2'/><path d='M30 30L39.5 39.5L30 49L20.5 39.5Z' fill='%232a2a2c'/></svg>") 0 0 / 60px 60px; padding: 18px 24px; border-bottom: 3px solid var(--gold); }
.shop-head a { display: inline-block; }
.shop-head img { height: 56px; display: block; }
.shop { max-width: 1040px; margin: 0 auto; padding: 36px 20px 64px; }
.shop h1 { font-family: "Open Sans", sans-serif; font-weight: 700; color: var(--pink); font-size: 32px; margin: 0 0 24px; }
.btn { display: inline-block; padding: 14px 26px; border-radius: 300px; background: var(--pink); color: #fff; font-family: Montserrat, sans-serif; font-weight: 600; font-size: 15px; text-decoration: none; border: 0; cursor: pointer; text-align: center; }
.btn:disabled, .btn.disabled { opacity: .5; cursor: default; }
.btn.ghost { background: transparent; color: var(--blue); border: 2px solid var(--blue); }
.muted { color: #5d6b6f; }
.msg { padding: 14px 16px; border-radius: 10px; background: #fdecea; color: #a2281c; font-size: 14px; margin: 12px 0; }

/* Cart */
.cart-wrap { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.cart-row { display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cart-row img { width: 84px; height: 84px; object-fit: contain; }
.cart-row .name { font-weight: 700; font-size: 16px; }
.cart-row .detail { font-size: 13px; margin-top: 3px; }
.cart-row .each { font-size: 13px; margin-top: 6px; }
s.was { color: #8a9497; font-weight: 400; margin-right: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--pink); }
.cap-note { margin: 8px 0 4px; padding: 8px 12px; border-radius: 8px; background: #fdf1d0; color: var(--ink); font-size: 12.5px; line-height: 1.45; }
.cart-row .right { text-align: right; }
.cart-row .line { font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.qty { display: inline-flex; align-items: center; border: 2px solid var(--line); border-radius: 300px; overflow: hidden; }
.qty button { width: 34px; height: 32px; border: 0; background: #fff; color: var(--blue); font-size: 18px; cursor: pointer; }
.qty span { min-width: 28px; text-align: center; font-weight: 700; }
.remove { display: block; margin-top: 8px; background: none; border: 0; color: #5d6b6f; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 0; margin-left: auto; }

/* Order summary (cart + checkout) */
.summary { background: #f1f4f4; border-radius: 16px; padding: 24px; }
.summary .label { font-size: 13px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: #5d6b6f; }
.summary .big { font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 44px; line-height: 1.1; margin: 4px 0 18px; color: var(--blue); }
.summary .lines { border-top: 1px solid var(--line); padding-top: 14px; }
.summary .ln { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 5px 0; }
.summary .ln.items { font-size: 13px; color: #5d6b6f; }
.summary .ln.total { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 14px; font-weight: 700; font-size: 17px; }
.summary .btn { width: 100%; margin-top: 18px; }

a.ship-ad { display: block; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--yellow); color: var(--ink); font-size: 13px; line-height: 1.4; text-decoration: none; }

/* Checkout */
.co-wrap { display: grid; grid-template-columns: 360px 1fr; gap: 44px; align-items: start; }
.co-form h2 { font-size: 16px; margin: 0 0 10px; }
.co-form section { margin-bottom: 26px; }
.co-form input[type=email] { width: 100%; padding: 12px 14px; border: 1px solid #d5dbe6; border-radius: 10px; font: inherit; font-size: 15px; color: var(--ink); }
.co-form input[type=email]:focus { outline: 2px solid rgba(223,65,50,.25); border-color: var(--pink); }
#pay { width: 100%; font-size: 16px; padding: 16px; }
.secure { font-size: 12px; text-align: center; margin-top: 10px; }

@media (max-width: 860px) {
  .cart-wrap, .co-wrap { grid-template-columns: 1fr; gap: 28px; }
  .summary .big { font-size: 38px; }
}
#oiam-added s.was { color: rgba(255,255,255,.75); }