* { box-sizing: border-box; }

/* The centering flex used to live directly on body — moved to its own wrapper so a
   top-banner cover (rendered as body's own first child) can span the full page width
   instead of being trapped inside the centered/padded box. */
.pp-page-wrapper { display: flex; justify-content: center; padding: 3rem 1rem; }
/* half-circle-top needs to sit flush against the very top of the page (that's the whole point
   of the "top" variant) — the wrapper's own top padding would otherwise push it back down. */
.pp-page-wrapper-flush-top { padding-top: 0; }

/* .pp-container: max-width/padding are per-page theme values — set inline alongside the
   dynamic body background/font (see public_page.html.twig). Everything else here is fixed. */
.pp-container { width: 100%; min-width: 0; text-align: center; }

.pp-cover { width: 100%; height: 9rem; object-fit: cover; display: block; }
.pp-cover-default { border-radius: 1.25rem; margin: 0 0 -2.75rem; }
/* .pp-cover-full-width: margin-left/right/width depend on the page's theme padding —
   set inline. border-radius/margin here are fixed regardless of theme. */
.pp-cover-full-width { border-radius: 0; margin: 0 0 -2.75rem; }
/* Same idea as .pp-cover-default (rounded corners) but the whole bottom edge is one continuous
   elliptical arc instead of just the four corners — the classic "half circle" banner cutout. */
.pp-cover-half-circle { border-radius: 0 0 50% 50% / 0 0 100% 100%; margin: 0 0 -2.75rem; }
.pp-cover-top-banner { height: 11rem; border-radius: 0 0 1.5rem 1.5rem; margin-bottom: 1.5rem; }
/* Identical shape, width, and avatar-overlap behavior to .pp-cover-half-circle — the only actual
   difference for this variant is positional (flush against the very top of the page, via
   .pp-page-wrapper-flush-top below), not the avatar relationship. */
.pp-cover-half-circle-top { border-radius: 0 0 50% 50% / 0 0 100% 100%; margin: 0 0 -2.75rem; }

/* .pp-avatar: size/shape/border/shadow are per-page theme values — set inline.
   Everything else (positioning, centering) is fixed regardless of theme. */
.pp-avatar {
    margin: 0 auto 1.25rem; object-fit: cover; background: rgba(0,0,0,.05);
    display: flex; align-items: center; justify-content: center; font-size: 1.75rem; font-weight: 700;
    position: relative;
}
.pp-avatar-ring-outer { display: flex; justify-content: center; margin: 0 0 1.25rem; }

/* Registered so the browser can smoothly interpolate the angle across the animation instead
   of the gradient just jumping between frames — plain CSS animations can't tween a value
   inside a gradient function without this. Browsers without @property support (older Firefox)
   simply keep the ring static at its initial angle: a safe, graceful fallback, not a broken one. */
@property --pp-ring-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

/* .pp-avatar-ring: border-radius follows the avatar shape theme setting — set inline. */
.pp-avatar-ring {
    display: inline-flex; padding: 3px;
    background: conic-gradient(from var(--pp-ring-angle), #f9ce34, #ee2a7b, #6228d7, #f9ce34);
    animation: pp-ring-spin 4s linear infinite;
    cursor: pointer;
}
.pp-avatar-ring .pp-avatar { margin: 0; }

@keyframes pp-ring-spin {
    to { --pp-ring-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-avatar-ring { animation: none; }
}

.pp-story-viewer {
    position: fixed; inset: 0; background: #000; z-index: 1000;
    display: none; align-items: center; justify-content: center;
}
.pp-story-viewer.open { display: flex; }
.pp-story-progress { position: absolute; top: .75rem; left: .75rem; right: .75rem; display: flex; gap: .35rem; z-index: 2; }
.pp-story-progress-seg { flex: 1; height: 3px; background: rgba(255,255,255,.35); border-radius: 3px; overflow: hidden; }
.pp-story-progress-seg .fill { height: 100%; width: 0%; background: #fff; }
.pp-story-close {
    position: absolute; top: .6rem; right: 1rem; z-index: 2; color: #fff; font-size: 1.5rem;
    background: none; border: none; cursor: pointer; line-height: 1;
}
.pp-story-frame {
    position: relative; width: 100%; max-width: 24rem; aspect-ratio: 9/16; overflow: hidden;
    border-radius: .75rem;
}
.pp-story-bg {
    position: absolute; inset: -10%; background-size: cover; background-position: center;
    filter: blur(30px) brightness(.6); transform: scale(1.2);
}
.pp-story-fg { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 auto; }
.pp-story-nav { position: absolute; top: 0; bottom: 0; width: 40%; z-index: 1; cursor: pointer; }
.pp-story-nav.prev { left: 0; }
.pp-story-nav.next { right: 0; }

.pp-name { font-size: 1.35rem; font-weight: 800; margin: 0 0 .35rem; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: .3rem; }
.pp-verified-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.05em; height: 1.05em; border-radius: 50%;
    background: #0f9d70; color: #fff; font-size: .7rem; flex-shrink: 0;
}
.pp-bio { opacity: .75; font-size: .9rem; line-height: 1.7; margin: 0 0 1.75rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.pp-social-row { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.75rem; }
/* .pp-social-icon: border-radius/background/color follow the page's button theme — set inline. */
.pp-social-icon {
    display: flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem; flex-shrink: 0;
    font-size: 1.2rem; text-decoration: none; line-height: 1;
}
.pp-social-icon:hover { opacity: .85; }
.pp-blocks { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
/* .pp-block: background/color/border-radius/box-shadow/border follow the page's button
   theme — set inline. Everything else here is fixed regardless of theme. */
.pp-block {
    display: block; width: 100%; padding: .9rem 1.25rem; text-decoration: none;
    font-weight: 700; font-size: .95rem;
    overflow-wrap: anywhere; box-sizing: border-box;
}
.pp-block:hover { opacity: .9; }
.pp-header { font-size: 1rem; font-weight: 700; margin: 1rem 0 .25rem; opacity: .85; }
.pp-divider { border: none; border-top: 1px solid rgba(0,0,0,.12); margin: 1rem 0; }
.pp-image { width: 100%; border-radius: 1rem; display: block; }
/* .pp-video-preview: border-radius follows the page's button-radius theme — set inline. */
.pp-video-preview { width: 100%; overflow: hidden; }
.pp-video-thumb-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; border-radius: inherit; }
.pp-video-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-video-play {
    position: absolute; inset: 0; margin: auto; width: 3.5rem; height: 3.5rem; border-radius: 999px;
    background: rgba(0,0,0,.65); color: #fff; border: none; font-size: 1.25rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding-inline-start: .2rem;
    transition: transform .15s, background-color .15s;
}
.pp-video-play:hover { background: rgba(0,0,0,.8); transform: scale(1.06); }
.pp-video-label { padding: .6rem .1rem 0; font-weight: 700; font-size: .9rem; text-align: center; }
.pp-video-iframe { width: 100%; aspect-ratio: 16 / 9; display: block; border-radius: inherit; }
.pp-soon { padding: .9rem 1.25rem; border-radius: 12px; border: 1px dashed rgba(0,0,0,.2); font-size: .85rem; opacity: .7; }
/* .pp-qr-card: box-shadow follows the page's shadow theme — set inline. */
.pp-qr-card { padding: 1.25rem; border-radius: 1rem; background: rgba(255,255,255,.6); border: 1px solid rgba(0,0,0,.08); }
.pp-qr-image { width: 160px; height: 160px; border-radius: .6rem; display: block; margin: 0 auto; }
.pp-qr-label { margin-top: .6rem; font-size: .85rem; opacity: .75; }
.pp-preview-banner { background: #f39c12; color: #1c1e26; font-weight: 700; font-size: .85rem; padding: .6rem; border-radius: 999px; margin-bottom: 1.5rem; }
.pp-order-banner { font-weight: 700; font-size: .85rem; padding: .75rem 1rem; border-radius: .75rem; margin-bottom: 1.5rem; }
.pp-order-success { background: #e3f6ee; color: #0b7d59; border: 1px solid #0f9d70; }
.pp-order-error { background: #fdecec; color: #b3261e; border: 1px solid #f2b8b8; }
/* .pp-cod-card: box-shadow follows the page's shadow theme — set inline. */
.pp-cod-card { padding: 1.25rem; border-radius: 1rem; background: rgba(255,255,255,.6); border: 1px solid rgba(0,0,0,.08); text-align: start; }
.pp-cod-title { font-weight: 700; font-size: .95rem; margin-bottom: .2rem; }
.pp-cod-price { font-size: .85rem; opacity: .7; margin-bottom: .9rem; }
.pp-cod-field { width: 100%; padding: .6rem .75rem; border: 1px solid rgba(0,0,0,.15); border-radius: .6rem; margin-bottom: .6rem; font-family: inherit; font-size: .9rem; background: #fff; color: #1c1e26; }
.pp-cod-submit { width: 100%; padding: .8rem; border: none; font-weight: 700; font-size: .9rem; cursor: pointer; font-family: inherit; }
.pp-ad-card { margin-top: 1.5rem; padding: 1.5rem; border-radius: 1rem; border: 1px dashed rgba(0,0,0,.2); background: rgba(0,0,0,.02); }
.pp-ad-text { font-size: .85rem; opacity: .75; margin-bottom: .9rem; }
.pp-footer { margin-top: 2.5rem; text-align: center; }
.pp-footer-cta { display: inline-block; font-size: .8rem; font-weight: 700; text-decoration: none; margin-bottom: .4rem; }
.pp-footer-cta:hover { text-decoration: underline; }
.pp-footer-brand { font-size: .75rem; opacity: .5; }
.pp-report-trigger {
    margin-top: .75rem; font-size: .75rem; opacity: .6; background: none; border: none;
    padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font-family: inherit;
}
.pp-report-trigger:hover { opacity: .85; }
.pp-report-modal {
    border: none; border-radius: 1.1rem; padding: 0; width: min(420px, 92vw);
    box-shadow: var(--shadow-elevated, 0 24px 60px -20px rgba(0,0,0,.35)); color: #1c1e26;
}
.pp-report-modal::backdrop { background: rgba(0,0,0,.5); }
.pp-report-modal-inner { padding: 1.5rem; text-align: start; }
.pp-report-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.pp-report-modal-head h3 { margin: 0; font-size: 1rem; font-weight: 800; }
.pp-report-modal-close {
    background: none; border: none; font-size: 1.1rem; line-height: 1; cursor: pointer;
    color: #6b7280; padding: .25rem; font-family: inherit;
}
.pp-report-form { display: flex; flex-direction: column; gap: .65rem; }
.pp-report-form select, .pp-report-form textarea, .pp-report-form input {
    font-family: inherit; font-size: .85rem; padding: .6rem .7rem; border-radius: .6rem;
    border: 1px solid rgba(0,0,0,.15); background: #fff; color: #1c1e26; width: 100%; box-sizing: border-box;
}
.pp-report-form textarea { resize: vertical; min-height: 4rem; }
.pp-report-form button[type="submit"] {
    padding: .7rem; border: none; border-radius: 999px; background: #1c1e26; color: #fff;
    font-weight: 700; font-size: .85rem; cursor: pointer; font-family: inherit; margin-top: .25rem;
}

/* Product catalog: cards, grid layout, floating cart, checkout/OTP/rating modals. */
.pp-product-card {
    display: flex; align-items: center; gap: 1rem;
    background: #fff; border-radius: 1rem; box-shadow: 0 2px 10px rgba(0,0,0,.08);
    padding: 1rem; margin-bottom: .8rem; text-align: start;
}
.pp-product-image-wrap { position: relative; flex-shrink: 0; }
.pp-product-image {
    width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: .6rem; flex-shrink: 0; background: #f3f2ee;
}
img.pp-product-image { cursor: zoom-in; }
.pp-product-image-placeholder { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.pp-product-discount-badge {
    position: absolute; top: -.4rem; inset-inline-start: -.4rem; background: #e74c3c; color: #fff;
    font-size: .68rem; font-weight: 800; padding: .15rem .4rem; border-radius: 999px; line-height: 1.3;
}
.pp-product-info { flex: 1; min-width: 0; }
.pp-product-title { font-weight: 700; font-size: 1.05rem; color: #1c1e26; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-product-price { font-size: 1.15rem; margin-top: .25rem; display: flex; align-items: baseline; gap: .4rem; }
.pp-product-grid .pp-product-price { justify-content: center; }
.pp-product-price-original { text-decoration: line-through; color: #9a9a9a; font-weight: 500; font-size: .9rem; }
.pp-product-price-now { font-weight: 800; color: #1c1e26; }
.pp-product-rating { margin-top: .35rem; font-size: .8rem; color: #d8d5cc; letter-spacing: 1px; }
.pp-product-rating .filled { color: #f5a623; }
.pp-product-rating-count { color: #8a8a8a; font-size: .75rem; letter-spacing: normal; margin-inline-start: .3rem; }
.pp-product-add-btn {
    border: none;
    padding: .7rem 1.25rem; font-weight: 700; font-size: .82rem; cursor: pointer; white-space: nowrap; flex-shrink: 0;
    font-family: inherit;
}
.pp-product-add-btn:hover { opacity: .9; }

.pp-product-grid { display: grid; grid-template-columns: repeat(var(--pp-product-cols, 2), 1fr); gap: .8rem; margin-bottom: .8rem; }
.pp-product-grid .pp-product-card { flex-direction: column; align-items: stretch; text-align: center; margin-bottom: 0; }
.pp-product-grid .pp-product-image { width: 100%; height: 6.5rem; }
.pp-product-grid .pp-product-add-btn { width: 100%; }
@media (max-width: 480px) {
    .pp-product-grid { grid-template-columns: repeat(min(var(--pp-product-cols, 2), 2), 1fr); }
}

.pp-cart-fab {
    position: fixed; inset-inline-end: 1.25rem; bottom: 1.25rem; z-index: 60;
    display: none; align-items: center; gap: .4rem;
    background: #1c1e26; color: #fff; border: none; border-radius: 999px;
    padding: .8rem 1.1rem; font-size: 1.2rem; cursor: pointer;
    box-shadow: 0 8px 24px -8px rgba(0,0,0,.4);
}
.pp-cart-badge {
    background: #e74c3c; color: #fff; border-radius: 999px; font-size: .7rem; font-weight: 700;
    min-width: 1.1rem; height: 1.1rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 .3rem;
}

.pp-modal {
    border: none; border-radius: 1.1rem; padding: 0; width: min(420px, 92vw); max-height: 85vh; overflow-y: auto;
    box-shadow: var(--shadow-elevated, 0 24px 60px -20px rgba(0,0,0,.35)); color: #1c1e26;
}
.pp-modal::backdrop { background: rgba(0,0,0,.5); }
.pp-modal > * { padding-inline: 1.5rem; }
.pp-modal-header {
    display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 1rem;
    padding-top: 1.5rem; padding-bottom: 1rem; text-align: start;
}
.pp-modal-close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: #6b7280; font-family: inherit; }

/* Product image lightbox: shows the image at its own natural size, only ever scaled down to
   fit — never upscaled, never wider than the page's own container (--pp-max-width, set on
   body alongside .pp-container's own max-width) or the viewport. */
.pp-image-lightbox {
    width: auto; max-width: min(var(--pp-max-width, 640px), 92vw); background: transparent; box-shadow: none;
}
.pp-image-lightbox::backdrop { background: rgba(0,0,0,.8); }
.pp-image-lightbox > * { padding-inline: 0; }
.pp-image-lightbox-img { display: block; max-width: 100%; max-height: 80vh; width: auto; height: auto; object-fit: contain; border-radius: .75rem; margin: 0 auto; }
.pp-image-lightbox-close {
    position: absolute; top: .6rem; inset-inline-end: .6rem; color: #fff; background: rgba(0,0,0,.5);
    width: 2rem; height: 2rem; border-radius: 999px; display: flex; align-items: center; justify-content: center;
}
.pp-checkout-items { display: flex; flex-direction: column; margin-bottom: 1rem; text-align: start; border: 1px solid rgba(0,0,0,.1); border-radius: .75rem; overflow: hidden; }
.pp-checkout-item {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .75rem .9rem; border-bottom: 1px solid rgba(0,0,0,.08);
}
.pp-checkout-item:last-child { border-bottom: none; }
.pp-checkout-item:nth-child(odd) { background: rgba(0,0,0,.015); }
.pp-checkout-item-main { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1; }
.pp-checkout-item-name { font-size: 1rem; font-weight: 700; color: #1c1e26; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-checkout-item-price { font-size: .85rem; color: #6b7280; font-weight: 600; }
.pp-checkout-item-original { text-decoration: line-through; color: #b0b0b0; font-weight: 500; }
.pp-checkout-item-qty { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.pp-checkout-item-qty span { font-size: .95rem; font-weight: 700; min-width: 1.1rem; text-align: center; }
.pp-checkout-item-qty button {
    width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); background: #fff;
    cursor: pointer; font-family: inherit; font-size: 1rem; line-height: 1;
}
.pp-checkout-total-row {
    display: flex; align-items: center; justify-content: space-between; font-size: 1.1rem; font-weight: 700;
    padding: .85rem .9rem; background: #f4f2ee; border-radius: .75rem; margin-bottom: 1.25rem; text-align: start;
}
.pp-checkout-total-row strong { font-size: 1.25rem; color: #0f9d70; }
.pp-modal-message {
    display: none; text-align: center; font-size: .82rem; font-weight: 600;
    padding: .6rem .75rem; border-radius: .6rem; margin-bottom: .75rem;
}
.pp-modal-message.info { display: block; background: #eef6f2; color: #0b7d59; border: 1px solid #bfe3d3; }
.pp-modal-message.danger { display: block; background: #fdecec; color: #b3261e; border: 1px solid #f2b8b8; }
.pp-id-card-body { text-align: center; padding-bottom: 1.5rem; }
.pp-id-card-avatar {
    width: 72px; height: 72px; border-radius: 999px; border: 3px solid #0f9d70; margin: 0 auto 1rem;
    background: rgba(0,0,0,.05); display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 700; overflow: hidden; color: #1c1e26;
}
.pp-id-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pp-id-card-name { font-size: 1.1rem; font-weight: 800; margin-bottom: .2rem; color: #1c1e26; }
.pp-id-card-meta { font-size: .85rem; color: #6b7280; margin-bottom: 1.25rem; }
.pp-id-card-qr { width: 160px; height: 160px; border-radius: .75rem; display: block; margin: 0 auto 1.25rem; }
.pp-id-card-body .pp-cod-submit { display: block; border-radius: .75rem; background: #0f9d70; color: #fff; text-decoration: none; }
.pp-rating-items { display: flex; flex-direction: column; gap: .6rem; padding-bottom: 1.5rem; text-align: start; }
.pp-rating-items { display: flex; flex-direction: column; gap: .6rem; padding-bottom: 1.5rem; text-align: start; }
.pp-rating-row { display: flex; align-items: center; justify-content: space-between; font-size: .85rem; gap: .5rem; }
.pp-star-input-row { letter-spacing: 2px; }
.pp-star-input { cursor: pointer; color: #d8d5cc; }
.pp-star-input.filled { color: #f5a623; }
#pp-checkout-form, #pp-cart-otp-form { padding-bottom: 1.5rem; }

.pp-otp-inputs { display: flex; justify-content: center; gap: .5rem; margin-bottom: 1rem; direction: ltr; }
.pp-otp-digit {
    width: 2.6rem; height: 3rem; text-align: center; font-size: 1.4rem; font-weight: 700;
    border: 1px solid rgba(0,0,0,.2); border-radius: .6rem; background: #fff; color: #1c1e26;
    font-family: inherit; padding: 0;
}
.pp-otp-digit:focus { outline: none; border-color: #0f9d70; box-shadow: 0 0 0 3px rgba(15,157,112,.15); }

#pp-checkout-submit:disabled, #pp-cart-otp-submit:disabled { opacity: .7; cursor: wait; }