/* Product page conversion elements: package cards, trust badges, sticky add-to-cart (mobile).
   Hand-written (not part of the Laravel Mix build); loaded by resources/views/product.blade.php. */

/* ----- package cards ----- */
.package-cards { margin: 0 0 20px; width: 100%; }
.package-cards__label { font-family: Cinzel, serif; font-weight: bold; font-size: 1rem; margin: 0 0 10px; color: #040404; }
.package-cards__grid { display: flex; flex-wrap: wrap; gap: 12px; }
.package-card {
    position: relative; flex: 1 1 calc(33.333% - 12px); min-width: 130px; max-width: 220px;
    padding: 22px 12px 16px; border: 2px solid #e0e0e0; border-radius: 6px; background: #fff;
    text-align: center; cursor: pointer; user-select: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.package-card:hover, .package-card:focus { border-color: #cdb06a; outline: none; }
.package-card.is-selected { border-color: #e6c169; box-shadow: 0 0 0 2px rgba(230, 193, 105, .35); }
.package-card.is-sample { flex-basis: calc(33.333% - 12px); }
.package-card__badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap;
    background: #e6c169; color: #040404; font-family: Cinzel, serif; font-weight: bold; font-size: .7rem;
    letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 12px;
}
.package-card__badge--sample { background: #ebebeb; }
.package-card__name { font-family: Cinzel, serif; font-weight: bold; font-size: 1.05rem; color: #040404; margin-bottom: 6px; }
.package-card__price { font-family: Cinzel, serif; font-size: 1.5rem; font-weight: bold; color: #040404; line-height: 1.2; }
.package-card__unit { font-size: .85rem; color: #777; margin-top: 4px; }
.package-card__save { font-size: .85rem; font-weight: bold; color: #21ba45; margin-top: 6px; }
@media screen and (max-width: 767px) {
    .package-card { flex-basis: calc(50% - 12px); max-width: none; padding: 20px 8px 14px; }
    .package-card.is-sample { flex-basis: 100%; padding: 14px 8px 10px; }
    .package-card.is-sample .package-card__price { font-size: 1.1rem; }
    .package-card__price { font-size: 1.3rem; }
}

/* ----- trust badges ----- */
.trust-badges { list-style: none; margin: 18px 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.trust-badges li {
    display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px;
    border: 1px solid #e4dcc6; border-radius: 20px; background: #faf7ef; font-size: .85rem; line-height: 1.2; color: #040404;
}
.trust-badges li svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: #b8953f; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trust-badges li small { display: block; color: #777; font-size: .75rem; margin-top: 2px; }
@media screen and (max-width: 767px) {
    .trust-badges li { flex: 1 1 calc(50% - 8px); }
}

/* ----- sticky add-to-cart (mobile only) ----- */
.sticky-cart {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    align-items: center; gap: 10px; padding: 8px 12px;
    background: #040404; color: #fff; box-shadow: 0 -4px 14px rgba(0, 0, 0, .35);
    transform: translateY(110%); transition: transform .25s ease;
}
.sticky-cart.is-visible { transform: translateY(0); }
.sticky-cart__image { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; background: #212121; flex: 0 0 44px; }
.sticky-cart__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sticky-cart__name { font-family: Cinzel, serif; font-size: .8rem; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cart__price { font-family: Cinzel, serif; font-size: 1.15rem; font-weight: bold; color: #e6c169; white-space: nowrap; }
.sticky-cart button.gold-background { margin: 0 !important; flex: 0 0 auto; width: auto !important; min-width: 0 !important; font-size: .8rem !important; }
.sticky-cart button.gold-background .overlay { padding: 12px 16px !important; white-space: nowrap; }
@media screen and (max-width: 768px) {
    .sticky-cart { display: flex; }
    body.has-sticky-cart { padding-bottom: 70px; }
}

/* ----- server-rendered summaries (visible until Angular renders the product view) ----- */
.product-summary { padding: 20px 0; }
.product-summary h1 { font-size: 2rem; }
.product-summary__description { text-align: justify; margin-bottom: 20px; }
.product-summary__packages, .product-summary__list { list-style: none; padding: 0; margin: 0 0 20px; }
.product-summary__packages li, .product-summary__list li { padding: 6px 0; border-bottom: 1px solid #ebebeb; }