/* Ridmi — new product card design (iteration 1). Scoped under .rp. NOTE: intentionally UN-layered — premium.css is un-layered and would beat @layer rules. Source design: ~/Documents/Claude Projects/Ridmi Redesign/ridmi_template.html */ .rp{ --slate:#50658C; --peri:#738EC8; --blue-bg:#E9F2FB; --blue-bg2:#C8DDF4; --pink:#F7CBD5; --rose:#D09BB4; --ink:#3A4358; --muted:#8590A6; --line:#ECEFF4; --ok:#1A9B5A; --ok-bg:#E6F7EE; --star:#F5B301; --online:#26D282; --fav:#E85C7A; --ff-ui:'Inter',system-ui,sans-serif; --ff-num:'Roboto',system-ui,sans-serif; --r-card:22px; --r-lg:26px; --r-btn:18px; --r-sm:14px; --r-pill:20px; --sh-sm:0 4px 14px rgba(80,101,140,.08); --sh-md:0 10px 30px rgba(80,101,140,.10); --sh-lg:0 14px 28px rgba(80,101,140,.26); } .rp, .rp *, .rp *::before, .rp *::after{ box-sizing:border-box; } .rp{ font-family:var(--ff-ui); color:var(--ink); background:var(--blue-bg); margin:0 auto; max-width:1100px; padding:14px 16px 120px; line-height:1.45; } .rp h1, .rp h2, .rp h3, .rp p, .rp dl, .rp dd, .rp figure{ margin:0; } .rp img{ max-width:100%; display:block; } .rp a{ color:inherit; text-decoration:none; } .rp button{ font-family:inherit; cursor:pointer; } .rp ::-webkit-scrollbar{ display:none; } .rp .cols{ display:block; } /* hero */ .rp .hero{ background:#fff; border-radius:var(--r-lg); padding:22px 20px 20px; box-shadow:var(--sh-md); text-align:center; position:relative; overflow:hidden; margin:0; } /* decorative pastel blobs behind hero content (blue top-right, pink bottom-left) */ .rp .blob{ position:absolute; width:200px; height:200px; border-radius:50%; background:var(--blue-bg2); opacity:.5; top:-70px; right:-60px; z-index:0; pointer-events:none; } .rp .blob2{ position:absolute; width:140px; height:140px; border-radius:50%; background:var(--pink); opacity:.35; bottom:-50px; left:-40px; z-index:0; pointer-events:none; } .rp .hero > :not(.blob):not(.blob2){ position:relative; z-index:1; } .rp .gallery{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -20px; padding:0 20px 2px; } .rp .shot{ flex:0 0 auto; height:266px; border-radius:var(--r-sm); overflow:hidden; scroll-snap-align:center; box-shadow:var(--sh-lg); background:var(--blue-bg); } .rp .shot img{ height:100%; width:auto; cursor:zoom-in; } /* gallery page indicator — gray dots + liquid cyan pill that flows between them */ .rp .dots{ position:relative; display:flex; gap:13px; justify-content:center; padding:14px 0 2px; } .rp .dots i{ width:6px; height:6px; border-radius:50%; background:var(--blue-bg2); } /* liquid metaball indicator: two cyan drops under an SVG goo filter — the trailing drop lags, so the bridge between them necks and detaches, then merges back ("droplet flowing into droplet") */ .rp .dots__goo{ position:absolute; left:0; pointer-events:none; filter:url(#rgoo); } .rp .dots__drop{ position:absolute; top:50%; left:0; width:11px; height:11px; border-radius:50%; background:var(--cyan); transform:translate(-50%,-50%); will-change:transform; } .rp .dots__drop_tail{ transition:transform .32s cubic-bezier(.34,1.1,.5,1); } /* fullscreen hi-res image lightbox — moved to in JS, so NOT scoped under .rp */ .rlightbox{ display:none; position:fixed; inset:0; z-index:3000; background:rgba(12,17,24,.94); align-items:center; justify-content:center; padding:24px; cursor:zoom-out; overscroll-behavior:contain; } .rlightbox.open{ display:flex; } .rlightbox__img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:10px; box-shadow:0 24px 70px rgba(0,0,0,.55); transition:transform .25s ease; cursor:zoom-in; } .rlightbox__img.zoomed{ transform:scale(2.4); cursor:zoom-out; } .rlightbox__close{ position:fixed; top:16px; right:16px; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; border:none; font-size:20px; cursor:pointer; display:grid; place-items:center; z-index:3001; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); } .rlightbox__close:hover{ background:rgba(255,255,255,.28); } .rp .stockchip{ display:inline-flex; gap:6px; align-items:center; margin-top:16px; background:var(--ok-bg); color:var(--ok); font-family:var(--ff-num); font-size:11px; font-weight:500; padding:6px 13px; border-radius:var(--r-pill); } .rp .badges{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:12px; } .rp .badges .badge{ display:inline-flex; align-items:center; font-family:var(--ff-num); font-weight:700; font-size:10.5px; line-height:1.3; padding:5px 10px; border-radius:var(--r-pill); white-space:nowrap; background:var(--blue-bg); color:var(--slate); } .rp .badges .badge span{ display:inline; } .rp .pbadge{ display:inline-flex; align-items:center; gap:5px; font-family:var(--ff-num); font-weight:700; font-size:10.5px; padding:5px 10px; border-radius:var(--r-pill); } .rp .pbadge.hit{ background:#FFF1D6; color:#9A6B00; } .rp .pbadge.new{ background:#E3F5E8; color:#1A8F4E; } .rp .pbadge.sale{ background:#FCE9EF; color:#B23A63; } .rp .title{ font-family:var(--ff-ui); font-weight:700; font-size:22px; line-height:1.25; margin-top:12px; color:var(--ink); overflow-wrap:anywhere; } .rp .sub{ font-size:12.5px; color:var(--muted); margin-top:8px; } /* book awards (feature "awords") — subtle gold-underlined line between title and author (no badges) */ .rp .awards{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px 10px; margin-top:9px; padding:0 10px; font-family:var(--ff-ui); font-size:11.5px; line-height:1.35; color:var(--muted); } .rp .awards__ico{ width:13px; height:13px; flex:0 0 auto; color:#C99A2E; } .rp .award{ color:var(--slate); font-weight:600; border-bottom:1.5px solid rgba(201,154,46,.55); } .rp .author{ margin-top:12px; font-size:13px; color:var(--slate); font-weight:700; } .rp .rate{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-size:13px; color:var(--muted); background:var(--blue-bg); padding:7px 14px; border-radius:var(--r-pill); } .rp .rate .stars{ color:var(--star); letter-spacing:1px; } .rp .rate b{ color:var(--ink); } .rp .rate__rev{ color:var(--muted); } /* товар без оценок, но с отзывами: счётчик-ссылка на /reviews/ */ .rp a.rate_norating{ text-decoration:none; cursor:pointer; gap:6px; } .rp a.rate_norating:hover{ color:var(--slate); } .rp .rate__ic{ width:14px; height:14px; flex:0 0 auto; opacity:.7; } /* код артикула — справа в заголовке блока «Ціна» */ .rp .card h3.cart-h{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; } .rp .artcode{ flex:0 0 auto; font-family:var(--ff-ui); font-size:11.5px; font-weight:600; color:var(--muted); text-transform:none; letter-spacing:.2px; white-space:nowrap; } .rp .artcode__v{ font-family:var(--ff-num); font-weight:700; color:var(--slate); font-variant-numeric:tabular-nums; } html.rd-dark .rp .artcode__v{ color:#AEBBD6; } /* darker title + author in the product hero (closer to the design) — dark-mode safe */ .rp .hero .title{ color:#2A3142; } .rp .hero .author{ color:#3A4358; } html.rd-dark .rp .hero .title, html.rd-dark .rp .hero .author{ color:#E7ECF4; } .rp .social{ display:flex; justify-content:center; gap:8px; align-items:center; margin-top:14px; font-size:12px; color:var(--slate); } .rp .social b{ color:var(--ink); font-weight:700; } .rp .social .dot{ width:8px; height:8px; border-radius:50%; background:var(--online); box-shadow:0 0 0 4px rgba(38,210,130,.18); } /* cards */ /* consolidated base card: white surface + radius + shadow shared by every card block (change the card look for the whole theme HERE). Each rule below keeps only its own padding/size. */ .rp .card, .rp .nothing, .rp .cart__items, .rp .cart__total-wrap, .rp .cart__coupon, .rp .ord, .rp .ord-pin, .rp .info_wrapper, .rp .subcard, .rp .acbook, .rp .wishlist-card{ background:#fff; border-radius:var(--r-card); box-shadow:var(--sh-sm); } .rp .card{ margin:14px 0 0; padding:18px; } .rp .card h3{ font-family:var(--ff-ui); font-weight:700; font-size:15px; color:var(--slate); margin-bottom:12px; } /* formats (skus) */ .rp .variants{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; } .rp .vopt{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--blue-bg); border:2px solid transparent; border-radius:var(--r-sm); padding:11px 14px; cursor:pointer; } .rp .vopt input{ position:absolute; opacity:0; pointer-events:none; } .rp .vopt .vinfo{ display:flex; flex-direction:column; gap:6px; min-width:0; } .rp .vopt .vl{ font-size:13px; color:var(--ink); font-weight:700; overflow-wrap:anywhere; } .rp .vopt .vp{ display:flex; align-items:baseline; gap:7px; white-space:nowrap; } .rp .vopt .vp b{ font-family:var(--ff-num); font-weight:900; font-size:15px; color:var(--ink); } .rp .vopt .vp s{ font-size:11px; color:var(--muted); } .rp .vopt .vp em{ font-style:normal; font-family:var(--ff-num); font-weight:700; font-size:10px; color:#fff; background:var(--rose); padding:2px 6px; border-radius:7px; } .rp .vopt.on{ border-color:var(--cyan); background:#fff; box-shadow:0 6px 16px rgba(var(--cyan-rgb),.12); } .rp .vopt.disabled{ opacity:.5; cursor:not-allowed; } /* "already in cart" pill on a format row — subtle green confirmation, distinct from the cyan .on selection state */ .rp .vopt .stepwrap{ display:none; flex-direction:column; align-items:center; gap:3px; flex:0 0 auto; } .rp .vopt.in-cart .stepwrap{ display:flex; } /* подпись «у кошику» под степпером: цифра степпера = количество В КОРЗИНЕ */ .rp .vopt .incart{ display:inline-flex; align-items:center; gap:3px; font-family:var(--ff); font-size:10px; font-weight:700; color:#0c8a5b; letter-spacing:.2px; line-height:1; white-space:nowrap; } .rp .vopt .incart svg{ width:10px; height:10px; flex:0 0 auto; } /* "pick a format" hint + attention bounce when buying with nothing selected */ .rp .pickhint{ display:none; margin:10px 0 16px; padding:9px 13px; border-radius:var(--r-sm); background:var(--pink); color:#9A3052; font-family:var(--ff-ui); font-size:12.5px; font-weight:700; text-align:center; } .rp .pickhint.show{ display:block; } .rp .variants.attn .vopt{ border-color:var(--rose); } .rp .variants.attn{ animation:rp-attn .5s ease; } @keyframes rp-attn{ 0%,100%{transform:translateX(0)} 15%,55%{transform:translateX(-7px)} 35%,75%{transform:translateX(7px)} } .rp .stepper{ display:flex; align-items:center; background:#fff; border:none; border-radius:var(--r-md); overflow:hidden; flex:0 0 auto; box-shadow:0 2px 8px rgba(80,101,140,.14); } .rp .stepper button{ width:34px; height:34px; border:none; background:#fff; font-size:18px; color:var(--slate); font-family:var(--ff-num); line-height:1; } .rp .stepper .qty{ display:flex; align-items:center; justify-content:center; min-width:30px; text-align:center; font-family:var(--ff-num); font-weight:700; font-size:14px; color:var(--ink); border:none; } .rp .summary{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding:13px 15px; background:var(--blue-bg); border-radius:var(--r-sm); } .rp .summary .sl{ font-size:12px; color:var(--slate); } .rp .summary b{ font-family:var(--ff-num); font-weight:900; font-size:21px; color:var(--ink); } .rp .deliver{ font-size:12px; color:var(--slate); display:flex; gap:9px; align-items:center; background:var(--blue-bg); padding:11px 13px; border-radius:var(--r-sm); } /* specs */ .rp .row{ display:flex; justify-content:space-between; font-size:13px; padding:9px 0; gap:12px; } .rp .row + .row{ border-top:1px solid var(--line); } .rp .row .k{ color:var(--muted); } .rp .row .v{ color:var(--ink); font-weight:500; max-width:62%; text-align:right; word-break:break-word; } .rp .morespecs{ display:none; } .rp .morespecs.open{ display:block; } .rp .moretoggle{ display:inline-flex; align-items:center; gap:6px; border:none; background:transparent; font-family:var(--ff-num); font-weight:700; font-size:13px; color:var(--cyan); padding:12px 0 0; } .rp .moretoggle .chev{ transition:transform .2s; font-size:11px; } .rp .moretoggle.open .chev{ transform:rotate(180deg); } /* description */ .rp .desc{ font-size:13.5px; line-height:1.7; color:#525b6e; } .rp .desc.clamp{ display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; } .rp .descmore{ display:inline-flex; align-items:center; gap:6px; border:none; background:transparent; font-family:var(--ff-num); font-weight:700; font-size:13px; color:var(--cyan); padding:10px 0 0; } .rp .descmore .chev{ transition:transform .2s; font-size:11px; } .rp .descmore.open .chev{ transform:rotate(180deg); } /* recommendations */ .rp .recos{ padding-top:18px; } .rp .recos h3{ font-family:var(--ff-num); font-weight:700; font-size:15px; color:var(--ink); padding-bottom:12px; } .rp .recoscroll{ display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; } .rp .rcard{ flex:0 0 auto; width:134px; background:#fff; border-radius:var(--r-sm); padding:10px; box-shadow:var(--sh-sm); display:flex; flex-direction:column; } .rp .rcard .rcov{ width:100%; height:158px; border-radius:10px; overflow:hidden; margin-bottom:9px; background:var(--blue-bg); } .rp .rcard .rcov img{ width:100%; height:100%; object-fit:cover; } .rp .rcard .rt{ font-family:var(--ff-ui); font-size:12px; font-weight:700; color:var(--ink); line-height:1.3; height:32px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .rp .rcard .ra{ font-size:10.5px; color:var(--muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rp .rcard .rpr{ font-family:var(--ff-num); font-weight:900; font-size:15px; color:var(--ink); margin:7px 0 9px; } /* fixed buy bar */ .rp .buybar{ position:fixed; left:0; right:0; bottom:0; background:#fff; padding:14px 16px 16px; z-index:30; display:flex; gap:12px; align-items:center; box-shadow:0 -10px 28px rgba(80,101,140,.12); border-radius:var(--r-lg) var(--r-lg) 0 0; } .rp .buybar .bp{ display:flex; flex-direction:column; } .rp .buybar .bp small{ font-size:11px; color:var(--muted); } .rp .buybar .bp b{ font-family:var(--ff-num); font-weight:900; font-size:19px; color:var(--ink); } .rp .buy{ flex:1; background:var(--cyan); color:#fff; border:none; border-radius:var(--r-btn); height:56px; font-family:var(--ff-ui); font-weight:700; font-size:16px; display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; cursor:pointer; } .rp .buy svg, .rp .buy .ic-cart{ width:21px; height:21px; flex:0 0 auto; } .rp .buy:active{ background:var(--cyan-dark); } .rp .buy{ transition:background .18s ease; } /* selected format already in the cart → button turns green "go to cart" */ .rp .buybar .buy.in-cart{ background:#1FA055; } .rp .buybar .buy.in-cart:hover{ background:#1b8f49; } .rp .buybar .buy.in-cart:active{ background:#187f41; } /* picked format is out of stock → button becomes "notify when available" (amber) */ .rp .buybar .buy.notify{ background:#E8893C; } .rp .buybar .buy.notify:hover{ background:#d97d31; } .rp .buybar .buy.notify:active{ background:#c9722c; } /* out-of-stock format row: dimmed price + a tag; still selectable so it can be "notified" */ .rp .vopt.oos .vp b{ color:var(--muted); } .rp .oos-tag{ display:inline-block; margin-left:8px; padding:2px 8px; border-radius:7px; background:rgba(232,92,122,.12); color:#c2415f; font-size:10.5px; font-weight:700; vertical-align:middle; white-space:nowrap; } html.rd-dark .rp .oos-tag{ background:rgba(232,92,122,.2); color:#FF8FA8; } /* arrived-plugin source markup is hidden — the buybar button triggers it */ .rp .arrived-host{ display:none; } /* universal cart icon on listing/reco "Купити" buttons */ .rp .product-list__item-btn.buy::before{ content:"\e906"; font-family:icomoon; font-size:15px; line-height:1; flex:0 0 auto; margin-right:1px; } .rp .buy:disabled{ opacity:.5; } .rp .heart{ width:56px; height:56px; border-radius:var(--r-btn); background:var(--pink); display:grid; place-items:center; color:#fff; font-size:20px; flex:0 0 auto; border:none; cursor:pointer; text-decoration:none; } /* favorites toggle (buybar) — distinct states by COLOUR so it's obvious: NOT saved = neutral surface + muted outline ♡ ； saved = rose tint + filled rose ♥ */ .rp .heart.favorites-icon{ width:56px; height:56px; border-radius:var(--r-btn); background:var(--blue-bg); color:var(--slate); border:1.5px solid var(--line); box-shadow:none; transition:background .18s ease, color .18s ease, border-color .18s ease, transform .1s ease; } .rp .heart.favorites-icon > span{ grid-area:1/1; font-size:24px; line-height:1; } .rp .heart.favorites-icon:hover{ background:#fff; color:var(--fav); border-color:var(--pink); } .rp .heart.favorites-icon:active{ transform:scale(.93); } .rp .heart.favorites-icon.active{ background:rgba(232,92,122,.13); color:var(--fav); border-color:transparent; } .rp .heart.favorites-icon.active:hover{ background:rgba(232,92,122,.2); color:var(--fav); } /* desktop */ @media (min-width:900px){ .rp .cols{ display:flex; gap:30px; align-items:flex-start; margin-top:10px; } .rp .hero{ flex:0 0 400px; position:sticky; top:24px; } .rp .hero .shot{ height:340px; } .rp .rightcol{ display:flex; flex-direction:column; gap:16px; flex:1; min-width:0; } .rp .rightcol .card{ margin:0; } .rp .recos{ margin-top:22px; } .rp .buybar{ left:50%; transform:translateX(-50%); width:100%; max-width:1100px; border-radius:var(--r-lg) var(--r-lg) 0 0; padding:14px 16px; gap:18px; } .rp .buybar .bp{ margin-right:auto; } .rp .buy{ flex:0 0 auto; min-width:320px; padding:0 30px; } } /* ============ CART (reuses .rp tokens; restyles existing cart classes, keeps their JS) ============ */ .rp.cart_page{ max-width:1100px; } .rp .title{ font-family:var(--ff-ui); font-weight:700; font-size:22px; color:var(--ink); margin-bottom:14px; } .rp .nothing{ padding:46px 20px; text-align:center; color:var(--muted); font-family:var(--ff-ui); font-size:15px; font-weight:600; } html.rd-dark .rp .nothing{ background:#1B2330; color:#8590A6; box-shadow:none; border:1px solid rgba(255,255,255,.07); } .rp .cart{ display:flex; flex-direction:column; gap:14px; } .rp .cart__items{ padding:4px 16px; } .rp .cart__item{ display:flex; align-items:center; gap:12px; padding:14px 0; } .rp .cart__item + .cart__item{ border-top:1px solid var(--line); } .rp .cart__item-image{ flex:0 0 auto; width:54px; height:72px; border-radius:10px; overflow:hidden; background:var(--blue-bg); display:block; } .rp .cart__item-image-img{ width:100%; height:100%; object-fit:cover; } .rp .cart__item-info-wrap, .rp .cart__item-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; } .rp .cart__item-name{ font-family:var(--ff-ui); font-size:13px; font-weight:700; color:var(--ink); line-height:1.3; overflow-wrap:anywhere; } .rp .cart__item-name a{ color:inherit; } .rp .cart__item-buy-wrap{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .rp .cart__item-price{ font-family:var(--ff-num); font-weight:900; font-size:15px; color:var(--ink); white-space:nowrap; margin-left:auto; } .rp .qty, .rp .cart__item-qty{ display:inline-flex; align-items:center; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-md); overflow:hidden; flex:0 0 auto; } .rp .qty__btn{ width:32px; height:34px; display:grid; place-items:center; color:var(--slate); cursor:pointer; font-size:14px; font-style:normal; } .rp .qty__btn:active{ background:var(--blue-bg); } .rp .qty__input, .rp .cart__item-qty-input{ width:42px; height:34px; text-align:center; border:none; border-left:1px solid var(--line); border-right:1px solid var(--line); font-family:var(--ff-num); font-weight:700; font-size:14px; color:var(--ink); background:#fff; outline:none; } /* cart + mini-cart qty stepper → IDENTICAL to the product-card .stepper (borderless, soft shadow, Roboto −/+ glyphs, #1B2330 number pill in dark) */ .rp .cart__item-qty, .rp .cart-mini__item-qty{ border:none; box-shadow:0 2px 8px rgba(80,101,140,.14); } .rp .cart__item-qty .qty__btn, .rp .cart-mini__item-qty .qty__btn{ width:34px; height:34px; font-size:18px; font-family:var(--ff-num); font-weight:400; } /* draw +/− as the SAME text glyphs as the card stepper (Roboto −/+) instead of the thin icon font */ .rp .cart__item-qty .qty__btn i, .rp .cart-mini__item-qty .qty__btn i{ display:none; } .rp .cart__item-qty .qty__btn::before, .rp .cart-mini__item-qty .qty__btn::before{ font-family:var(--ff-num); font-size:18px; font-weight:400; line-height:1; } .rp .cart__item-qty .qty__btn.minus::before, .rp .cart-mini__item-qty .qty__btn.minus::before{ content:"\2212"; } .rp .cart__item-qty .qty__btn.plus::before, .rp .cart-mini__item-qty .qty__btn.plus::before{ content:"+"; } /* number area: same width band + pill radius as the card .qty span */ .rp .cart__item-qty .qty__input, .rp .cart__item-qty-input, .rp .cart-mini__item-qty .qty__input{ border-left:none; border-right:none; width:34px; border-radius:var(--r-md); } .rp .cart__item-remove{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--blue-bg); display:grid; place-items:center; color:var(--muted); cursor:pointer; font-size:11px; } .rp .cart__item-remove:hover{ background:var(--pink); color:#fff; } /* totals */ .rp .cart__total-wrap{ padding:14px 18px; } .rp .cart__total-block{ display:flex; align-items:center; justify-content:space-between; padding:7px 0; font-size:14px; color:var(--ink); } .rp .cart__total-name{ color:var(--muted); } .rp .cart__total-price{ font-family:var(--ff-num); font-weight:700; color:var(--ink); } .rp .cart__total-wrap .cart__total-block:last-child{ border-top:1px solid var(--line); margin-top:4px; padding-top:12px; } .rp .cart__total-wrap .cart__total-block:last-child .cart__total-name{ font-weight:700; color:var(--ink); } .rp .cart__total-wrap .cart__total-block:last-child .cart__total-price{ font-weight:900; font-size:19px; color:var(--ink) !important; } .rp .cart__total-price_discount{ color:var(--rose) !important; } /* coupon */ .rp .cart__affiliate-btn_use-coupon, .rp .cart__affiliate-btn{ display:inline-block; color:var(--cyan); font-weight:700; font-size:13px; cursor:pointer; font-family:var(--ff-num); padding:6px 0; } .rp .cart__coupon{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:14px 16px; } .rp .cart__coupon-name{ font-size:13px; color:var(--muted); width:100%; } .rp .cart__coupon-input_text{ flex:1; min-width:140px; height:40px; border:1.5px solid var(--line); border-radius:var(--r-md); padding:0 12px; font-family:var(--ff-ui); font-size:13px; outline:none; } .rp .cart__coupon-input_submit{ height:40px; padding:0 18px; border:none; border-radius:var(--r-md); background:var(--blue-bg2); color:var(--slate); font-weight:700; font-family:var(--ff-num); cursor:pointer; } /* coupon result: valid code -> green text, invalid -> red text (+ matching input border) */ .rp .cart__coupon-error, .rp .cart__coupon .errormsg{ width:100%; margin:3px 0 0; color:var(--fav); font-family:var(--ff-ui); font-size:13px; font-weight:700; } .rp .cart__coupon .saved{ width:100%; margin:3px 0 0; padding:0; background:none; border-radius:0; color:var(--ok); font-family:var(--ff-ui); font-size:13px; font-weight:700; } .rp .cart__coupon:has(.cart__coupon-error) .cart__coupon-input_text{ border-color:var(--fav); } .rp .cart__coupon:has(.saved) .cart__coupon-input_text{ border-color:var(--ok); } /* checkout */ .rp .cart__buttons-btn{ display:flex !important; align-items:center; justify-content:center; width:100%; height:56px; background:var(--cyan) !important; color:#fff !important; border:none; border-radius:var(--r-btn) !important; font-family:var(--ff-ui); font-weight:700; font-size:16px !important; cursor:pointer; } .rp .cart__buttons-btn:active{ background:var(--cyan-dark) !important; } .rp .cart__no-photo{ width:54px; height:72px; border-radius:10px; background:var(--blue-bg); } /* --- cart badge compact + mobile price fixes (2026-06-26) --- */ .rp .cart__item .badge{ display:inline-block; width:auto; max-width:100%; padding:2px 9px; border-radius:8px; font-family:var(--ff-num); font-weight:700; font-size:10px; line-height:1.6; color:var(--slate); margin:0 0 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; } .rp.cart_page{ overflow-x:hidden; box-sizing:border-box; } /* inner blocks fill the 720px wrapper; cart_page keeps its own max-width (line 203), NOT 100% */ .rp .cart__items, .rp .cart__total-wrap, .rp .cart__coupon{ box-sizing:border-box; max-width:100%; } @media (max-width:560px){ .rp.cart_page{ padding-left:12px; padding-right:12px; } .rp .cart__item-price{ font-size:14px; } } /* mobile overflow fix v2 */ html, body{ overflow-x:hidden; } .rp .cart__item-info, .rp .cart__item-info-wrap, .rp .cart__item-buy-wrap{ min-width:0; } .rp .cart__item-price{ flex-shrink:0; } @media (max-width:560px){ .rp.cart_page{ padding:14px 12px 120px; } } .rp .cart__item .badge{ align-self:flex-start; } /* ============ CATEGORY / LISTING (2026-06-26) ============ */ .rp.category-page{ max-width:1100px; } .rp .category-name, .rp h1.title{ font-family:var(--ff-ui); font-weight:800; font-size:24px; color:var(--ink); margin:6px 0 16px; } .rp .category__sidebar{ display:none; } .rp .category__wrapper{ display:block; } .rp .category__content{ width:100%; } .rp .sidebar__block.filters__sidebar-block, .rp .product-list-panel, .rp .product-list__panel{ display:none; } /* grid-only/inline-only removed 2026-07-01: single grid view, list-toggle dropped */ .rp .product-list__content{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; } .rp .product-list__item{ background:#fff; border-radius:18px; box-shadow:var(--sh-sm); overflow:hidden; position:relative; } .rp .product-list__item-form{ display:flex; flex-direction:column; height:100%; margin:0; } .rp .product-list__item-main{ position:relative; } .rp .product-list__item-image{ display:block; aspect-ratio:3/4; background:var(--blue-bg); overflow:hidden; } .rp .product-list__item-image img{ width:100%; height:100%; object-fit:cover; } .rp .product-list__item-secondary{ padding:12px 12px 14px; display:flex; flex-direction:column; gap:8px; flex:1; } .rp .product-list__item-name{ color:var(--ink); text-decoration:none; } .rp .product-list__item-name h3{ font-family:var(--ff-ui); font-weight:700; font-size:13px; line-height:1.3; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .rp .product-list__item-add2cart{ margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:8px; } .rp .product-list__item-prices{ display:flex; flex-direction:column-reverse; } .rp .product-list__item-price{ font-family:var(--ff-num); font-weight:900; font-size:16px; color:var(--ink); } .rp del.product-list__item-price.old, .rp .product-list__item-price.old{ font-size:11px; color:var(--muted); text-decoration:line-through; font-weight:400; } .rp .product-list__item-btns{ flex:0 0 auto; } .rp .product-list__item-btn{ display:grid; place-items:center; width:42px; height:42px; min-width:0; border-radius:var(--r-md); background:var(--cyan); color:#fff; border:none; cursor:pointer; text-decoration:none; } .rp .product-list__item-btn.add, .rp .product-list__item-btn.disabled{ background:var(--ok); } .rp .product-list__item-btn-icon-text{ display:none; } .rp .product-list__item-label-block{ position:absolute; top:8px; left:8px; z-index:2; display:flex; flex-direction:column; gap:4px; align-items:flex-start; } .rp .product-list__item-label-block .badge{ display:inline-block; padding:3px 8px; border-radius:8px; font-family:var(--ff-num); font-weight:700; font-size:11px; } .rp .product-list__item-badge.markdown{ background:var(--rose); color:#fff; font-family:var(--ff-num); font-weight:700; font-size:11px; padding:3px 8px; border-radius:8px; display:inline-block; } .rp .product-list__item-icons{ position:absolute; top:8px; right:8px; z-index:2; } .rp .favorites-icon{ width:32px; height:32px; border-radius:50%; background:#fff; display:grid; place-items:center; color:var(--slate); box-shadow:var(--sh-sm); cursor:pointer; } /* favorite button has BOTH hearts (outline + filled) for logged-in users — show only one by state */ .rp .favorites-icon > span{ grid-area:1/1; font-size:17px; line-height:1; } /* stack both in the same cell */ .rp .favorites-icon .icon-fonticon_favorites-f{ display:none; } .rp .favorites-icon.active .icon-fonticon_favorites{ display:none; } .rp .favorites-icon.active .icon-fonticon_favorites-f{ display:block; } .rp .favorites-icon.active{ color:var(--fav); } @media (min-width:680px){ .rp .product-list__content{ grid-template-columns:repeat(4,1fr); gap:18px; } } @media (min-width:1000px){ .rp .product-list__content{ grid-template-columns:repeat(5,1fr); } } /* listing buy button refinement */ .rp .product-list__item-add2cart{ margin-top:auto; display:flex; flex-direction:column; gap:9px; align-items:stretch; } .rp .product-list__item-prices{ display:flex; align-items:baseline; gap:7px; flex-direction:row; } .rp .product-list__item-btn.buy, .rp .product-list__item-btn.go{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-width:0; max-width:100%; height:38px; padding:0 12px; box-sizing:border-box; border-radius:var(--r-md); background:var(--cyan); color:#fff; font-family:var(--ff-num); font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; } .rp .product-list__item-btn.buy:active{ background:var(--cyan-dark); } .rp .product-list__item-btn-icon-text{ display:inline !important; } .rp .product-list__item-btn-icon_add{ display:none; } /* item already in cart (.add added server-side via $in_cart AND by JS after AJAX add): swap "Купити" → "В кошику" text (in addition to the dim/green) */ .rp .product-list__item-btn.buy.add .product-list__item-btn-icon_buy{ display:none; } .rp .product-list__item-btn.buy.add .product-list__item-btn-icon_add{ display:inline-flex; align-items:center; } /* ============ HOME (2026-06-26) ============ */ .rp.homepage{ max-width:1100px; } .rp .homepage-wrap{ display:block; } .rp .homepage-sidebar{ display:none; } .rp .homepage-content{ width:100%; display:flex; flex-direction:column; } .rp .product-list__title, .rp .homepage h2.title, .rp .homepage .title{ font-family:var(--ff-ui); font-weight:800; font-size:20px; color:var(--ink); margin:22px 0 14px; } .rp section.content-visibility{ display:flex; flex-direction:column; } /* universal "show more" link in slider titles (bestsellers/discounts/publishers/wishlists) */ .rp .product-list__title-wrap{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; } .rp .slider__show-more{ margin-left:auto; font-size:13px; font-weight:600; color:var(--slate); text-decoration:underline; white-space:nowrap; } .rp .slider__show-more:hover{ color:var(--cyan); } html.rd-dark .rp .slider__show-more{ color:#C9D4E6; } .rp .product-list__content.carousel{ display:flex !important; grid-template-columns:none !important; gap:14px; overflow-x:auto; scrollbar-width:none; padding-bottom:6px; } .rp .product-list__content.carousel::-webkit-scrollbar{ display:none; } .rp .product-list__content.carousel .product-list__item{ flex:0 0 158px; width:158px; } .rp .homepage-tags, .rp .homepage__widgets, .rp .homepage__last-reviews, .rp .homepage-news-announces{ display:none; } /* ===== LISTING controls: filters + sorting + pagination (un-hide + style, 2026-06-26) ===== */ .rp .sidebar__block.filters__sidebar-block{ display:block !important; margin:0 0 14px; } .rp .sidebar__title.filters__sidebar-title{ display:none; } .rp .product-list-panel{ display:flex !important; align-items:center; gap:10px; margin:0 0 14px; flex-wrap:wrap; } /* sort dropdown */ .rp .sorting{ position:relative; } .rp .sorting__active-sort{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-md); cursor:pointer; } .rp .sorting__active-name i{ color:var(--slate); font-style:normal; } .rp .sorting__active-btn{ border:none; background:none; font-family:var(--ff-ui); font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; } .rp .sorting__list{ position:absolute; top:calc(100% + 6px); left:0; z-index:30; min-width:210px; background:#fff; border-radius:14px; box-shadow:var(--sh-md); padding:6px; list-style:none; margin:0; display:none; } .rp .sorting:hover .sorting__list, .rp .sorting:focus-within .sorting__list, .rp .sorting.open .sorting__list{ display:block; } .rp .sorting__list-block{ list-style:none; } .rp .sorting__list-link, .rp .sorting__list-block a{ display:block; padding:9px 12px; border-radius:9px; font-family:var(--ff-ui); font-size:13px; color:var(--ink); text-decoration:none; white-space:nowrap; } .rp .sorting__list-link:hover, .rp .sorting__list-block a:hover{ background:var(--blue-bg); color:var(--cyan); } .rp .sorting__list-link.active{ color:var(--cyan); font-weight:700; } /* filters as dropdown pills */ .rp .filters, .rp .filters__form{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; margin:0; } .rp .filters__param{ position:relative; } .rp .filters__name{ display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 14px; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-md); cursor:pointer; font-family:var(--ff-ui); font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; } .rp .filters__name::after{ content:"▾"; font-size:10px; color:var(--muted); } .rp .filters__block{ position:absolute; top:calc(100% + 6px); left:0; z-index:25; min-width:230px; max-height:340px; overflow:auto; background:#fff; border-radius:14px; box-shadow:var(--sh-md); padding:14px; } .rp .filters__param.collapsed .filters__block{ display:none; } .rp .filter__input-text{ width:84px; height:34px; border:1.5px solid var(--line); border-radius:10px; padding:0 10px; font-family:var(--ff-num); font-size:13px; } .rp .filters__label{ display:flex; align-items:center; gap:8px; padding:7px 2px; font-family:var(--ff-ui); font-size:13px; color:var(--ink); cursor:pointer; } .rp .filters__block .filter-link{ display:block; color:var(--cyan); font-size:12px; padding:6px 0 0; text-decoration:none; } /* active filter chips */ .rp .active-filters{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 14px; padding:0; } .rp .active-filters__filter{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; background:var(--blue-bg); border-radius:20px; font-family:var(--ff-ui); font-size:12px; color:var(--slate); white-space:nowrap; } .rp .active-filters__filter-remove{ cursor:pointer; color:var(--muted); font-style:normal; } /* pagination */ .rp .pagination{ margin:24px 0 10px; } .rp .paging-nav{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center; } .rp .paging-nav a, .rp .paging-nav .p{ display:grid; place-items:center; min-width:38px; height:38px; padding:0 9px; border-radius:11px; font-family:var(--ff-num); font-weight:700; font-size:14px; text-decoration:none; } .rp .paging-nav a{ background:#fff; color:var(--ink); border:1.5px solid var(--line); } .rp .paging-nav a:hover{ border-color:var(--cyan); color:var(--cyan); } .rp .paging-nav .p{ background:var(--cyan); color:#fff; } /* pagination ul/li/span fix + filter hover */ .rp .paging-nav ul{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center; list-style:none; margin:0; padding:0; } .rp .paging-nav li{ list-style:none; display:flex; } .rp .paging-nav span{ display:grid; place-items:center; min-width:38px; height:38px; font-family:var(--ff-num); font-weight:700; color:var(--muted); } .rp .paging-nav li.selected .p{ background:var(--cyan); color:#fff; } /* hover-open removed 2026-07-02: dropdown opens by CLICK only (js toggle) — hover was showing empty panels before ajax init */ /* ===== subcategory list on category page (2026-06-26) ===== */ .rp .subcats-links{ margin:2px 0 20px; } .rp .subcats-links__list{ display:flex; flex-wrap:wrap; gap:8px; } /* сворачивание подкатегорий — ТОЛЬКО мобилка (desktop места достаточно, показываем все) */ @media (max-width:760px){ .rp .subcats-links.is-collapsed .subcats-links__list{ max-height:76px; overflow:hidden; } } .rp .subcats-toggle{ display:none; align-items:center; gap:7px; margin-top:10px; height:34px; padding:0 16px; background:transparent; border:1.5px dashed var(--peri); border-radius:20px; color:var(--peri); font-family:var(--ff-ui); font-size:13px; font-weight:700; cursor:pointer; transition:border-color .15s, color .15s; } .rp .subcats-toggle:hover{ border-color:var(--cyan); color:var(--cyan); } .rp .subcats-toggle .car{ font-size:10px; line-height:1; transition:transform .2s; } .rp .subcats-links:not(.is-collapsed) .subcats-toggle .car{ transform:rotate(180deg); } .rp .subcats-toggle__less{ display:none; } .rp .subcats-links:not(.is-collapsed) .subcats-toggle__more{ display:none; } .rp .subcats-links:not(.is-collapsed) .subcats-toggle__less{ display:inline; } .rp .subcats-links__list-link{ display:inline-flex; align-items:center; height:34px; padding:0 14px; background:#fff; border:1.5px solid var(--line); border-radius:20px; color:var(--slate); font-family:var(--ff-ui); font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap; transition:border-color .15s, color .15s; } .rp .subcats-links__list-link:hover{ border-color:var(--cyan); color:var(--cyan); } .rp .subcats-links__image{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1.5px solid var(--line); border-radius:20px; padding:4px 14px 4px 5px; } .rp .subcats-links__image:hover{ border-color:var(--cyan); } .rp .subcats-links__img{ width:26px; height:26px; border-radius:50%; object-fit:cover; flex:0 0 auto; } .rp .subcats-links__image .subcats-links__list-link{ border:none; padding:0; height:auto; background:none; } /* thumbnails variant */ .rp .subcats-thumbnails{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; margin:2px 0 20px; } .rp .subcats-thumbnails__block{ display:flex; flex-direction:column; gap:8px; text-decoration:none; color:var(--ink); } .rp .subcats-thumbnails__image, .rp .subcats-thumbnails__no-photo{ width:100%; aspect-ratio:1; border-radius:14px; overflow:hidden; background:var(--blue-bg); } .rp .subcats-thumbnails__image-img{ width:100%; height:100%; object-fit:cover; } .rp .subcats-thumbnails__subcat a, .rp .subcats-thumbnails__name{ text-decoration:none; color:var(--ink); font-family:var(--ff-ui); font-size:13px; font-weight:600; } /* ============ MY ORDERS (account section) ============ */ .rp.orders-page{ overflow-x:hidden; } .rp.orders-page .title{ margin-bottom:14px; } /* account tabs (Profile / Orders / Log out) */ .rp .profile-links{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 22px; padding:0; } .rp .profile-links__block{ margin:0; } .rp .profile-links__link{ display:inline-flex; align-items:center; height:38px; padding:0 16px; border-radius:var(--r-pill); background:#fff; color:var(--slate); font-family:var(--ff-ui); font-weight:700; font-size:13px; text-decoration:none; box-shadow:var(--sh-sm); transition:.15s; } .rp .profile-links__link:hover{ background:var(--blue-bg); } .rp .profile-links__block_selected .profile-links__link{ background:var(--cyan); color:#fff; box-shadow:none; } /* order cards */ .rp .orders{ display:grid; grid-template-columns:1fr; gap:14px; align-items:stretch; } @media (min-width:760px){ .rp .orders{ grid-template-columns:1fr 1fr; } } .rp .orders .nothing{ grid-column:1 / -1; } /* equal-height cards in a row: footer pinned to bottom */ .rp .orders .ord{ display:flex; flex-direction:column; } .rp .orders .ord .ord__foot{ margin-top:auto; padding-top:14px; } /* collapse long orders to 2 items (toggle reveals the rest) */ .rp .ord__items .ord__item_extra{ display:none; } .rp .ord.is-open .ord__items .ord__item_extra{ display:flex; } .rp .ord__more-items{ display:inline-flex; align-items:center; gap:5px; align-self:flex-start; margin-top:8px; padding:6px 0; background:none; border:none; color:var(--cyan); font-family:var(--ff-ui); font-weight:700; font-size:12.5px; cursor:pointer; } .rp .ord__more-items:hover{ color:var(--cyan-dark); } .rp .ord{ padding:16px 18px; } .rp .ord__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .rp .ord__num{ font-family:var(--ff-num); font-weight:900; font-size:16px; color:var(--ink); } .rp .ord__status{ font-family:var(--ff-ui); font-weight:700; font-size:12px; line-height:1; padding:5px 11px; border-radius:var(--r-pill); background:var(--blue-bg); } .rp .ord__date{ margin-left:auto; font-size:13px; color:var(--muted); } .rp .ord__items{ margin:12px 0 0; } .rp .ord__item{ display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--line); } .rp .ord__item:first-child{ border-top:none; padding-top:2px; } .rp .ord__item-img{ width:40px; height:54px; flex:0 0 auto; border-radius:8px; overflow:hidden; background:var(--blue-bg); } .rp .ord__item-img img{ width:100%; height:100%; object-fit:cover; display:block; } .rp .ord__item-noimg{ display:block; width:100%; height:100%; background:var(--blue-bg); } .rp .ord__item-name{ flex:1; min-width:0; font-family:var(--ff-ui); font-size:13px; font-weight:600; color:var(--ink); line-height:1.35; } .rp .ord__dl{ display:inline-flex; flex-wrap:wrap; gap:6px; margin-left:8px; vertical-align:middle; } .rp .ord__dl a{ font-family:var(--ff-num); font-size:11px; font-weight:700; color:#fff; background:var(--cyan); border-radius:6px; padding:2px 8px; text-decoration:none; } .rp .ord__dl a:hover{ background:var(--cyan-dark); } .rp .ord__item-qty{ flex:0 0 auto; font-size:12px; color:var(--muted); white-space:nowrap; } .rp .ord__item-price{ flex:0 0 auto; min-width:74px; text-align:right; font-family:var(--ff-num); font-weight:700; font-size:14px; color:var(--ink); white-space:nowrap; } .rp .ord__totals{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); } .rp .ord__total-row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-size:13px; color:var(--muted); padding:3px 0; } .rp .ord__total-row > span:last-child{ font-family:var(--ff-num); font-weight:700; color:var(--ink); white-space:nowrap; } .rp .ord__total-row_disc > span:last-child{ color:var(--rose); } .rp .ord__total-row_grand{ font-size:15px; margin-top:3px; color:var(--ink); } .rp .ord__total-row_grand > span:last-child{ font-weight:900; font-size:18px; } .rp .ord__foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; } .rp .ord__meta{ font-size:12px; color:var(--slate); background:var(--blue-bg); border-radius:9px; padding:4px 10px; } .rp .ord__more{ margin-left:auto; font-family:var(--ff-ui); font-weight:700; font-size:13px; color:var(--cyan); text-decoration:none; white-space:nowrap; } .rp .ord__more:hover{ color:var(--cyan-dark); } .rp .orders-page .nothing{ margin-top:4px; } /* ---- dark ---- */ html.rd-dark .rp .ord{ background:#1B2330; } html.rd-dark .rp .profile-links__link{ background:#1B2330; color:#C9D4E6; box-shadow:none; border:1px solid rgba(255,255,255,.07); } html.rd-dark .rp .profile-links__link:hover{ background:#232C3B; } html.rd-dark .rp .profile-links__block_selected .profile-links__link{ background:var(--cyan); color:#fff; border-color:transparent; } html.rd-dark .rp .ord__num, html.rd-dark .rp .ord__item-name, html.rd-dark .rp .ord__item-price, html.rd-dark .rp .ord__total-row > span:last-child, html.rd-dark .rp .ord__total-row_grand{ color:#E7ECF4; } html.rd-dark .rp .ord__item-img, html.rd-dark .rp .ord__item-noimg{ background:#232C3B; } html.rd-dark .rp .ord__status, html.rd-dark .rp .ord__meta{ background:#232C3B; color:#C9D4E6; } html.rd-dark .rp .ord__item, html.rd-dark .rp .ord__totals{ border-top-color:rgba(255,255,255,.08); } /* ---- order DETAIL page (my.order.html) ---- */ .rp.orderpage{ overflow-x:hidden; } .rp .ord-back{ display:inline-flex; align-items:center; font-family:var(--ff-ui); font-weight:700; font-size:13px; color:var(--slate); text-decoration:none; margin-bottom:14px; } .rp .ord-back:hover{ color:var(--cyan); } .rp .ord_detail{ padding:18px 20px; } .rp .ord__meta-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px 24px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); } .rp .ord__field{ display:flex; flex-direction:column; gap:3px; min-width:0; } .rp .ord__field-label{ font-family:var(--ff-ui); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); } .rp .ord__field-val{ font-family:var(--ff-ui); font-size:13px; font-weight:600; color:var(--ink); line-height:1.4; word-break:break-word; } .rp .ord__plugin{ margin-top:12px; font-size:13px; color:var(--ink); } .rp .ord__comment{ margin-top:12px; font-size:13px; line-height:1.5; color:var(--ink); background:var(--blue-bg); border-radius:14px; padding:12px 14px; } .rp .ord__comment .ord__field-label{ display:block; margin-bottom:4px; } .rp .orderpage .ord__items{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); } .rp .ord__item-img a{ display:block; width:100%; height:100%; } .rp .ord__item_svc .ord__item-img{ display:none; } .rp .ord__dl-main{ display:inline-block; margin-left:8px; font-family:var(--ff-ui); font-weight:700; font-size:12px; color:var(--cyan); text-decoration:none; vertical-align:middle; } .rp .ord__dl-main:hover{ color:var(--cyan-dark); } /* PIN gate */ .rp .ord-pin{ padding:22px 20px; max-width:420px; } .rp .ord-pin__err{ color:var(--fav); font-size:13px; font-weight:700; margin:0 0 10px; } .rp .ord-pin__hint{ font-size:13px; color:var(--muted); line-height:1.5; margin:0 0 14px; } .rp .ord-pin__row{ display:flex; gap:10px; } .rp .ord-pin__row input[type=text]{ flex:1; min-width:0; height:46px; border:1.5px solid var(--line); border-radius:var(--r-md); padding:0 14px; font-family:var(--ff-num); font-weight:700; font-size:18px; letter-spacing:.25em; text-align:center; color:var(--ink); background:#fff; outline:none; } .rp .ord-pin__row input[type=submit]{ flex:0 0 auto; height:46px; padding:0 22px; border:none; border-radius:var(--r-md); background:var(--cyan); color:#fff; font-family:var(--ff-ui); font-weight:700; font-size:14px; cursor:pointer; } .rp .ord-pin__row input[type=submit]:hover{ background:var(--cyan-dark); } /* dark */ html.rd-dark .rp .ord__field-val, html.rd-dark .rp .ord__plugin{ color:#E7ECF4; } html.rd-dark .rp .ord__comment{ background:#232C3B; color:#E7ECF4; } html.rd-dark .rp .ord__meta-grid, html.rd-dark .rp .orderpage .ord__items{ border-top-color:rgba(255,255,255,.08); } html.rd-dark .rp .ord-back{ color:#C9D4E6; } html.rd-dark .rp .ord-pin{ background:#1B2330; } html.rd-dark .rp .ord-pin__row input[type=text]{ background:#232C3B; border-color:rgba(255,255,255,.10); color:#E7ECF4; } /* ============ MY PROFILE (account form) ============ */ .rp.profile_page{ overflow-x:hidden; } .rp .saved{ background:var(--ok-bg); color:var(--ok); font-family:var(--ff-ui); font-weight:700; font-size:14px; padding:12px 16px; border-radius:14px; margin-bottom:18px; } .rp .info_wrapper{ padding:24px; max-width:760px; } /* 2-column grid form on desktop, single column on mobile */ .rp .wa-form{ display:grid; grid-template-columns:1fr; gap:16px 24px; align-items:start; } @media (min-width:680px){ .rp .wa-form{ grid-template-columns:1fr 1fr; } } .rp .wa-form .wa-field{ margin:0; min-width:0; } .rp .wa-form .wa-field-photo, .rp .wa-form .wa_buttons{ grid-column:1 / -1; } .rp .wa-form .wa-name{ display:block; font-family:var(--ff-ui); font-size:12px; font-weight:700; color:var(--muted); margin:0 0 6px; } .rp .wa-form .wa-value{ display:block; } .rp .wa-form .wa-value p{ margin:0 0 8px; } .rp .wa-form .wa-value p:last-child{ margin-bottom:0; } /* inputs */ .rp .wa-form input[type=text], .rp .wa-form input[type=email], .rp .wa-form input[type=tel], .rp .wa-form input[type=password], .rp .wa-form input[type=number], .rp .wa-form input[type=url], .rp .wa-form input[type=date], .rp .wa-form select, .rp .wa-form textarea{ width:100%; max-width:100%; height:46px; box-sizing:border-box; border:1.5px solid var(--line); border-radius:var(--r-md); padding:0 14px; font-family:var(--ff-ui); font-size:14px; color:var(--ink); background:#fff; outline:none; transition:border-color .15s; } .rp .wa-form textarea{ height:auto; min-height:96px; padding:12px 14px; line-height:1.5; resize:vertical; } .rp .wa-form input:disabled, .rp .wa-form input[disabled]{ background:var(--blue-bg); color:var(--muted); cursor:not-allowed; } .rp .wa-form select{ -webkit-appearance:none; appearance:none; padding-right:36px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238590A6' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; background-size:15px; } /* birthday: day / month / year on one row */ .rp .wa-field-birthday .wa-value{ display:flex; gap:8px; align-items:center; } .rp .wa-field-birthday select{ width:auto; min-width:0; padding-right:30px; background-position:right 9px center; } .rp .wa-field-birthday select:first-of-type{ flex:0 0 auto; } .rp .wa-field-birthday select:nth-of-type(2){ flex:1 1 auto; } .rp .wa-field-birthday input[type=text]{ flex:0 0 auto; width:72px !important; min-width:0 !important; text-align:center; padding:0 8px; } /* photo */ .rp .wa-field-photo .wa-value{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .rp .wa-field-photo .wa-value p{ margin:0; } .rp .wa-field-photo img{ width:64px; height:64px; border-radius:50%; object-fit:cover; background:var(--blue-bg); flex:0 0 auto; } .rp .wa-field-photo input[type=file]{ font-family:var(--ff-ui); font-size:13px; color:var(--muted); max-width:100%; } .rp .wa-field-photo input[type=file]::file-selector-button{ height:38px; padding:0 16px; margin-right:10px; border:1.5px solid var(--blue-bg2); border-radius:10px; background:var(--blue-bg); color:var(--slate); font-family:var(--ff-ui); font-weight:700; font-size:13px; cursor:pointer; } .rp .wa-field-photo input[type=file]::file-selector-button:hover{ background:var(--blue-bg2); } /* inline action links (change password, delete photo) */ .rp .wa-field-password .wa-value > span > a, .rp .wa-field-photo .wa-value > span > a{ color:var(--cyan); font-family:var(--ff-ui); font-weight:700; font-size:13px; text-decoration:none; } .rp .wa-field-password .wa-value > span > a:hover, .rp .wa-field-photo .wa-value > span > a:hover{ color:var(--cyan-dark); } /* custom radio/checkbox (built by JS) */ .rp .custom-label{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:var(--ff-ui); font-size:14px; color:var(--ink); margin-right:16px; } .rp .custom-label input[type=radio], .rp .custom-label input[type=checkbox]{ position:absolute; opacity:0; width:0; height:0; } .rp .custom-label .custom-label__input{ width:20px; height:20px; flex:0 0 auto; border:1.5px solid var(--blue-bg2); border-radius:50%; background:#fff; position:relative; transition:.15s; } .rp .custom-label input:checked + .custom-label__input{ border-color:var(--cyan); } .rp .custom-label input:checked + .custom-label__input::after{ content:""; position:absolute; inset:4px; border-radius:50%; background:var(--cyan); } /* errors */ .rp .wa-form .errormsg, .rp .wa-form .wa-error-msg, .rp .wa-form .error-msg, .rp .wa-form .wa-error{ color:var(--fav); font-size:12px; font-weight:600; margin-top:5px; } .rp .wa-form .wa-field.error input, .rp .wa-form .wa-field.wa-error input, .rp .wa-form .error input{ border-color:var(--fav); } /* save button */ .rp .wa_buttons{ margin-top:22px; } .rp .info_wrapper .button, .rp .wa_buttons .button{ display:inline-flex; align-items:center; justify-content:center; height:50px; padding:0 34px; border:none; border-radius:14px; background:var(--cyan); color:#fff; font-family:var(--ff-ui); font-weight:700; font-size:15px; cursor:pointer; transition:background .15s; } .rp .info_wrapper .button:hover, .rp .wa_buttons .button:hover{ background:var(--cyan-dark); } /* delete profile + connected accounts */ .rp .profile-delete{ display:inline-block; margin:16px 0 0; font-family:var(--ff-ui); font-size:13px; font-weight:600; color:var(--muted); text-decoration:none; } .rp .profile-delete:hover{ color:var(--fav); } .rp .wa-auth-adapters__name{ font-family:var(--ff-ui); font-size:15px; font-weight:800; color:var(--ink); margin:28px 0 12px; } .rp .wa-auth-adapters{ margin:0; padding:0; } .rp .wa-auth-adapters__list{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0; } .rp .wa-auth-adapters__block{ margin:0; padding:0; list-style:none; } .rp .wa-auth-adapters__link{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:14px; background:#fff; box-shadow:var(--sh-sm); color:var(--slate); cursor:pointer; transition:.15s; } .rp .wa-auth-adapters__link:hover{ background:var(--blue-bg); } .rp .wa-auth-adapters__icon{ font-size:23px; line-height:1; } /* ---- dark ---- */ html.rd-dark .rp .info_wrapper{ background:#1B2330; } html.rd-dark .rp .wa-form input[type=text], html.rd-dark .rp .wa-form input[type=email], html.rd-dark .rp .wa-form input[type=tel], html.rd-dark .rp .wa-form input[type=password], html.rd-dark .rp .wa-form input[type=number], html.rd-dark .rp .wa-form input[type=url], html.rd-dark .rp .wa-form input[type=date], html.rd-dark .rp .wa-form select, html.rd-dark .rp .wa-form textarea{ background:#232C3B; border-color:rgba(255,255,255,.10); color:#E7ECF4; } html.rd-dark .rp .wa-form input:disabled, html.rd-dark .rp .wa-form input[disabled]{ background:#161D28; color:#7D8AA3; } html.rd-dark .rp .custom-label{ color:#E7ECF4; } html.rd-dark .rp .custom-label .custom-label__input{ background:#232C3B; border-color:rgba(255,255,255,.16); } /* additional services inside the article card (checkbox + optional variant