/* Premium UI layer for Django templates (PLP + PDP) Drop-in: include in layout.html or per-template as done in blocks. */ :root{ --pm-bg: #ffffff; --pm-bg2: #f6f7fb; --pm-text: #0b1220; --pm-muted: #5b6476; --pm-line: rgba(11,18,32,.10); --pm-soft: rgba(11,18,32,.05); --pm-primary: #1f4bff; --pm-primary2: #142ea8; --pm-warn: #b45309; --pm-sale: #be123c; --pm-radius: 18px; --pm-shadow: 0 16px 45px rgba(11,18,32,.10); --pm-shadow2: 0 10px 28px rgba(11,18,32,.10); --pm-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Apple Color Emoji", "Segoe UI Emoji"; } .pm-section { padding: 26px 0 34px; } .pm-section--muted { background: var(--pm-bg2); border-top: 1px solid var(--pm-line); border-bottom: 1px solid var(--pm-line); } .pm-breadcrumb { background: #fff; border-bottom: 1px solid var(--pm-line); } .pm-breadcrumb__row { padding: 14px 0; display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-family: var(--pm-font); } .pm-link { color: var(--pm-muted); text-decoration:none; } .pm-link:hover { color: var(--pm-text); text-decoration:underline; } .pm-sep { color: rgba(11,18,32,.25); } .pm-muted { color: var(--pm-muted); } .pm-strong { color: var(--pm-text); font-weight: 600; } .pm-code { font-variant-numeric: tabular-nums; letter-spacing: .02em; } .pm-dot { color: rgba(11,18,32,.35); } .pm-eyebrow{ font-family: var(--pm-font); font-size: 12px; letter-spacing: .10em; text-transform: uppercase; color: rgba(11,18,32,.45); margin-bottom: 6px; } .pm-h1{ font-family: var(--pm-font); font-size: clamp(22px, 2.3vw, 34px); line-height: 1.08; margin: 0; color: var(--pm-text); font-weight: 700; } .pm-h1--tight{ margin-top: 2px; } .pm-h2{ font-family: var(--pm-font); font-size: 20px; margin: 0; color: var(--pm-text); font-weight: 700; } .pm-h3{ font-family: var(--pm-font); font-size: 16px; margin: 0; color: var(--pm-text); font-weight: 700; } .pm-lead{ font-family: var(--pm-font); font-size: 14px; line-height: 1.6; color: var(--pm-muted); margin: 14px 0 0; } .pm-help{ font-family: var(--pm-font); font-size: 12px; line-height: 1.5; color: rgba(11,18,32,.55); margin-top: 10px; } .pm-divider{ height: 1px; background: var(--pm-line); margin: 16px 0; } /* Cards */ .pm-card{ background: var(--pm-bg); border: 1px solid var(--pm-line); border-radius: var(--pm-radius); box-shadow: var(--pm-shadow2); } .pm-card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; padding: 16px; } .pm-card--sticky{ position: sticky; top: 18px; } /* Buttons */ .pm-btn{ appearance:none; border: 1px solid var(--pm-line); background: #fff; color: var(--pm-text); font-family: var(--pm-font); font-weight: 600; border-radius: 14px; padding: 11px 14px; display:inline-flex; align-items:center; justify-content:center; gap: 8px; cursor:pointer; text-decoration:none; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease, color .14s ease; } .pm-btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(11,18,32,.12); border-color: rgba(11,18,32,.20); } .pm-btn:active{ transform: translateY(0); box-shadow: none; } .pm-btn--primary{ background: linear-gradient(180deg, var(--pm-primary), var(--pm-primary2)); border-color: transparent; color: #fff; } .pm-btn--primary:hover{ box-shadow: 0 16px 34px rgba(31,75,255,.25); } .pm-btn--ghost{ background: rgba(255,255,255,.8); } .pm-btn--lg{ padding: 12px 16px; border-radius: 16px; } .pm-btn--sm{ padding: 9px 12px; border-radius: 12px; font-size: 13px; } .pm-inline{ display:inline; } /* Badges */ .pm-badge{ font-family: var(--pm-font); font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--pm-line); background: #fff; display:inline-flex; align-items:center; gap: 6px; } .pm-badge--soft{ background: rgba(11,18,32,.04); } .pm-badge--new{ background: rgba(31,75,255,.12); border-color: rgba(31,75,255,.25); color: var(--pm-primary2); } .pm-badge--sale{ background: rgba(190,18,60,.10); border-color: rgba(190,18,60,.24); color: var(--pm-sale); } .pm-badge--warn{ background: rgba(180,83,9,.10); border-color: rgba(180,83,9,.24); color: var(--pm-warn); } /* Inputs */ .pm-input{ width: 100%; border: 1px solid rgba(11,18,32,.18); border-radius: 14px; padding: 10px 12px; font-family: var(--pm-font); outline: none; background: #fff; } .pm-input:focus{ border-color: rgba(31,75,255,.55); box-shadow: 0 0 0 4px rgba(31,75,255,.12); } .pm-field{ display:flex; flex-direction:column; gap:6px; font-family: var(--pm-font); font-size: 12px; color: rgba(11,18,32,.55); } .pm-field--qty{ gap: 8px; } /* Chips */ .pm-chips{ display:flex; flex-wrap:wrap; gap: 8px; } .pm-chip{ border: 1px solid rgba(11,18,32,.16); background: rgba(11,18,32,.03); color: var(--pm-text); border-radius: 999px; padding: 9px 12px; font-family: var(--pm-font); font-weight: 650; cursor:pointer; transition: background .14s ease, transform .14s ease, border-color .14s ease; } .pm-chip:hover{ transform: translateY(-1px); background: rgba(11,18,32,.05); border-color: rgba(11,18,32,.22); } .pm-chip.is-active{ background: rgba(31,75,255,.12); border-color: rgba(31,75,255,.35); color: var(--pm-primary2); } /* PLP layout */ .pm-plp{ display:grid; grid-template-columns: 320px 1fr; gap: 22px; align-items:start; } @media (max-width: 992px){ .pm-plp{ grid-template-columns: 1fr; } .pm-card--sticky{ position: relative; top: 0; } } .pm-plp__top{ display:flex; align-items:flex-end; justify-content:space-between; gap: 16px; margin-bottom: 18px; } .pm-plp__topActions{ display:flex; gap: 10px; } .pm-filter{ padding: 16px; } .pm-filter__title{ font-family: var(--pm-font); font-size: 13px; font-weight: 800; color: var(--pm-text); margin-bottom: 10px; } .pm-filter__body{ display:flex; flex-direction:column; gap: 10px; } .pm-grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* Product grid */ .pm-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .pm-grid--rel{ grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1200px){ .pm-grid--rel{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 992px){ .pm-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .pm-grid--rel{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px){ .pm-grid{ grid-template-columns: 1fr; } .pm-grid--rel{ grid-template-columns: 1fr; } } /* Product card */ .pm-productCard{ border-radius: var(--pm-radius); border: 1px solid var(--pm-line); overflow: hidden; background: #fff; box-shadow: 0 12px 26px rgba(11,18,32,.08); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .pm-productCard:hover{ transform: translateY(-2px); box-shadow: var(--pm-shadow); border-color: rgba(11,18,32,.18); } .pm-productCard__media{ position: relative; display:block; background: linear-gradient(180deg, #fff, rgba(11,18,32,.02)); aspect-ratio: 4/3; } .pm-productCard__media img{ width: 100%; height: 100%; object-fit: contain; padding: 16px; transition: transform .22s ease; } .pm-productCard:hover .pm-productCard__media img{ transform: scale(1.03); } .pm-productCard__badges{ position:absolute; top: 12px; left: 12px; display:flex; flex-wrap:wrap; gap: 8px; } .pm-productCard__hover{ position:absolute; inset: 0; background: radial-gradient(closest-side, rgba(31,75,255,.10), rgba(255,255,255,0)); opacity: 0; display:flex; flex-direction:column; justify-content:flex-end; padding: 14px; transition: opacity .18s ease; } .pm-productCard:hover .pm-productCard__hover{ opacity: 1; } .pm-productCard__hoverTitle{ font-family: var(--pm-font); font-weight: 800; color: var(--pm-text); } .pm-productCard__hoverText{ font-family: var(--pm-font); font-size: 12px; color: rgba(11,18,32,.62); margin-top: 4px; } .pm-productCard__body{ padding: 14px 14px 16px; } .pm-productCard__meta{ display:flex; align-items:center; gap: 8px; font-family: var(--pm-font); font-size: 12px; color: rgba(11,18,32,.55); } .pm-productCard__name{ display:block; margin-top: 8px; font-family: var(--pm-font); font-weight: 800; color: var(--pm-text); text-decoration:none; line-height: 1.25; min-height: 40px; } .pm-productCard__name:hover{ text-decoration: underline; } .pm-productCard__priceRow{ display:flex; align-items:baseline; justify-content:space-between; gap: 10px; margin-top: 12px; } .pm-stock{ font-family: var(--pm-font); font-size: 12px; color: rgba(11,18,32,.55); } .pm-price{ display:flex; align-items:baseline; gap: 10px; font-family: var(--pm-font); } .pm-price__now{ font-weight: 900; color: var(--pm-text); font-size: 16px; } .pm-price__old{ color: rgba(11,18,32,.45); text-decoration: line-through; font-size: 13px; } .pm-price__suffix{ color: rgba(11,18,32,.45); font-size: 12px; } .pm-price--lg .pm-price__now{ font-size: 22px; } .pm-productCard__actions{ display:flex; gap: 10px; margin-top: 14px; } .pm-empty{ grid-column: 1 / -1; padding: 24px; border: 1px dashed rgba(11,18,32,.18); border-radius: var(--pm-radius); background: rgba(11,18,32,.02); } /* Pagination */ .pm-pagination{ margin-top: 22px; display:flex; justify-content:center; gap: 8px; } /* PDP layout */ .pm-pdp{ display:grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 22px; align-items:start; } @media (max-width: 992px){ .pm-pdp{ grid-template-columns: 1fr; } } .pm-pdp__content{ font-family: var(--pm-font); } .pm-gallery{ display:grid; grid-template-columns: 86px 1fr; gap: 12px; } @media (max-width: 560px){ .pm-gallery{ grid-template-columns: 1fr; } } .pm-gallery__thumbs{ display:flex; flex-direction:column; gap: 10px; } @media (max-width: 560px){ .pm-gallery__thumbs{ flex-direction:row; overflow:auto; padding-bottom: 6px; } } .pm-thumb{ border: 1px solid rgba(11,18,32,.14); background:#fff; border-radius: 14px; padding: 6px; cursor:pointer; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; width: 86px; height: 86px; flex: 0 0 auto; } .pm-thumb img{ width:100%; height:100%; object-fit:contain; } .pm-thumb:hover{ transform: translateY(-1px); box-shadow: 0 10px 20px rgba(11,18,32,.10); border-color: rgba(11,18,32,.22); } .pm-thumb.is-active{ border-color: rgba(31,75,255,.55); box-shadow: 0 0 0 4px rgba(31,75,255,.10); } .pm-gallery__main{ position:relative; border: 1px solid rgba(11,18,32,.10); border-radius: var(--pm-radius); background: linear-gradient(180deg, #fff, rgba(11,18,32,.02)); min-height: 420px; display:flex; align-items:center; justify-content:center; overflow:hidden; } .pm-gallery__main img{ width: 100%; height: 100%; object-fit: contain; padding: 22px; } .pm-gallery__badges{ position:absolute; top: 14px; left: 14px; display:flex; gap: 8px; } .pm-pdp__kpis{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } @media (max-width: 560px){ .pm-pdp__kpis{ grid-template-columns: 1fr; } } .pm-kpi{ border: 1px solid rgba(11,18,32,.10); border-radius: 14px; padding: 10px 12px; background: rgba(11,18,32,.02); } .pm-kpi__label{ display:block; font-size: 12px; color: rgba(11,18,32,.55); } .pm-kpi__value{ display:block; margin-top: 3px; font-weight: 800; color: var(--pm-text); } /* Marking */ .pm-block__head{ margin-bottom: 12px; } .pm-markingGroup{ margin-top: 14px; } .pm-markingGroup__title{ display:flex; align-items:center; gap: 10px; margin-bottom: 10px; } .pm-markingGroup__grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (max-width: 560px){ .pm-markingGroup__grid{ grid-template-columns: 1fr; } } .pm-markingCard{ border: 1px solid rgba(11,18,32,.12); border-radius: 16px; background: #fff; padding: 12px 12px; cursor:pointer; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease; display:block; position:relative; } .pm-markingCard:hover{ transform: translateY(-1px); box-shadow: 0 12px 24px rgba(11,18,32,.10); border-color: rgba(11,18,32,.20); } .pm-markingCard__radio{ position:absolute; opacity:0; pointer-events:none; } .pm-markingCard.is-selected{ border-color: rgba(31,75,255,.55); box-shadow: 0 0 0 4px rgba(31,75,255,.10); background: rgba(31,75,255,.03); } .pm-markingCard__top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; } .pm-markingCard__hint{ font-size: 12px; margin-top: 6px; color: rgba(11,18,32,.55); } /* Buybox */ .pm-buybox{ padding: 14px; border-radius: var(--pm-radius); } .pm-buybox__row{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; } .pm-buybox__form{ margin-top: 12px; } .pm-buybox__controls{ display:grid; grid-template-columns: 1fr 1.1fr; gap: 12px; align-items:end; } @media (max-width: 560px){ .pm-buybox__controls{ grid-template-columns: 1fr; } } .pm-buybox__secondary{ display:flex; gap: 10px; margin-top: 12px; flex-wrap:wrap; } .pm-qty{ position:relative; display:flex; align-items:center; gap: 10px; } .pm-qty input{ width: 100%; padding-right: 82px; } .pm-qty__btn{ position:absolute; right: 10px; width: 34px; height: 34px; border-radius: 12px; border: 1px solid rgba(11,18,32,.16); background: rgba(11,18,32,.03); cursor:pointer; font-weight: 900; } .pm-qty__btn[data-pm-qty="+"]{ right: 10px; } .pm-qty__btn[data-pm-qty="-"]{ right: 50px; } /* Accordion */ .pm-accordion details{ border: 1px solid rgba(11,18,32,.10); border-radius: 16px; background: #fff; padding: 10px 12px; margin-top: 10px; } .pm-accordion summary{ cursor:pointer; font-family: var(--pm-font); font-weight: 900; color: var(--pm-text); list-style:none; } .pm-accordion summary::-webkit-details-marker{ display:none; } .pm-accBody{ padding: 10px 0 4px; } .pm-prose{ font-family: var(--pm-font); color: var(--pm-muted); line-height: 1.65; font-size: 14px; } .pm-list{ margin: 0; padding-left: 18px; color: var(--pm-muted); line-height: 1.6; font-size: 14px; } .pm-specGrid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (max-width: 560px){ .pm-specGrid{ grid-template-columns: 1fr; } } .pm-spec{ border: 1px solid rgba(11,18,32,.10); border-radius: 14px; padding: 10px 12px; background: rgba(11,18,32,.02); display:flex; align-items:baseline; justify-content:space-between; gap: 10px; } .pm-spec span{ color: rgba(11,18,32,.55); font-size: 12px; } .pm-spec strong{ color: var(--pm-text); } /* Safety: prevent old theme product styles from overriding */ .product, .product * { box-sizing: border-box; } /* WOW Mockup */ .pm-mockup{ padding: 14px; margin-top: 16px; } .pm-mockup__head{ padding: 2px 2px 10px; } .pm-mockup__body{ display:grid; grid-template-columns: 1fr; gap: 12px; } .pm-mockup__controls{ padding: 10px 2px 2px; } .pm-mockup__row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; } @media (max-width: 560px){ .pm-mockup__row{ grid-template-columns: 1fr; } } .pm-mockup__actions{ display:flex; gap: 10px; margin-top: 12px; flex-wrap:wrap; } .pm-file{ display:flex; align-items:center; gap: 12px; flex-wrap:wrap; } .pm-file input{ position:absolute; left:-9999px; } .pm-file__btn{ display:inline-flex; align-items:center; justify-content:center; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(11,18,32,.16); background: rgba(11,18,32,.03); font-family: var(--pm-font); font-weight: 800; cursor:pointer; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; } .pm-file__btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 22px rgba(11,18,32,.10); border-color: rgba(11,18,32,.22); } .pm-file__hint{ font-family: var(--pm-font); font-size: 12px; color: rgba(11,18,32,.55); } .pm-mockupOverlay{ position:absolute; inset: 0; display:flex; align-items:center; justify-content:center; pointer-events:none; opacity: 0; transition: opacity .18s ease; } .pm-mockupOverlay.is-visible{ opacity: 1; } .pm-mockupOverlay__logo{ width: 28%; max-width: 260px; transform: translate(0px, 0px); opacity: .92; filter: drop-shadow(0 10px 18px rgba(11,18,32,.18)); } .pm-mockupOverlay__tag{ position:absolute; bottom: 12px; right: 12px; font-family: var(--pm-font); font-size: 12px; font-weight: 900; padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(11,18,32,.12); background: rgba(255,255,255,.86); backdrop-filter: blur(10px); }