/* * Diwali frames: borders, garlands, corners and lanterns * ================================================================= * Loaded after festival-diwali.css while Diwali is live. Pure decoration: * static artwork, nothing here animates, so it costs download weight only * and no browser time. Each piece is a small SVG kept in a custom property * so the rules can reuse it. * * Maintained by hand: edit this file directly. The artwork lives in the custom * properties at the top (small inline SVGs: change a colour there and every * use follows); the rules below place it. */ :root[data-festive="diwali"] { --fd-garland: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cpath d='M0 3 Q10 12 20 3 T40 3' fill='none' stroke='%23E0A526' stroke-width='1.2'/%3E%3Ccircle cx='10' cy='10.5' r='5' fill='%23F08A1D' stroke='%23FFB02E' stroke-width='1.3' stroke-dasharray='1.5 1'/%3E%3Ccircle cx='10' cy='10.5' r='2.1' fill='%23FFC94D'/%3E%3Ccircle cx='30' cy='10.5' r='5' fill='%23F08A1D' stroke='%23FFB02E' stroke-width='1.3' stroke-dasharray='1.5 1'/%3E%3Ccircle cx='30' cy='10.5' r='2.1' fill='%23FFC94D'/%3E%3Cpath d='M20 4 l3 6 -3 5 -3 -5z' fill='%234C7A45'/%3E%3C/svg%3E"); --fd-diyas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='26' viewBox='0 0 52 26'%3E%3Ccircle cx='26' cy='11' r='10' fill='%23F08A1D' opacity='.2'/%3E%3Cpath d='M13 15H39C39 22 34 24 26 24C18 24 13 22 13 15Z' fill='%23E0A526'/%3E%3Cpath d='M26 3C30.5 8.5 31.5 12 26 16C20.5 12 21.5 8.5 26 3Z' fill='%23FFC94D'/%3E%3Ccircle cx='3' cy='20' r='1.4' fill='%23E0A526'/%3E%3Ccircle cx='49' cy='20' r='1.4' fill='%23E0A526'/%3E%3C/svg%3E"); --fd-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 4H7M17 4H24' stroke='%23E0A526' stroke-width='1.2'/%3E%3Cpath d='M12 .8L15.2 4 12 7.2 8.8 4z' fill='%23F08A1D'/%3E%3C/svg%3E"); --fd-flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='20' viewBox='0 0 180 20'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='44' y1='0' x2='178' y2='0'%3E%3Cstop offset='0' stop-color='%23E0A526'/%3E%3Cstop offset='1' stop-color='%23E0A526' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='11' cy='9' r='8' fill='%23F08A1D' opacity='.22'/%3E%3Cpath d='M3 11H19C19 16.5 15 18 11 18C7 18 3 16.5 3 11Z' fill='%23E0A526'/%3E%3Cpath d='M11 2C14 6 15 8.5 11 11.5C7 8.5 8 6 11 2Z' fill='%23FFC94D'/%3E%3Cpath d='M28 10L33 5.5 38 10 33 14.5z' fill='%23F08A1D'/%3E%3Cpath d='M44 10H178' stroke='url(%23g)' stroke-width='1.6'/%3E%3C/svg%3E"); --fd-flourish-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='20' viewBox='0 0 260 20'%3E%3Cdefs%3E%3ClinearGradient id='l' gradientUnits='userSpaceOnUse' x1='2' y1='0' x2='104' y2='0'%3E%3Cstop offset='0' stop-color='%23E0A526' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23E0A526'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' gradientUnits='userSpaceOnUse' x1='156' y1='0' x2='258' y2='0'%3E%3Cstop offset='0' stop-color='%23E0A526'/%3E%3Cstop offset='1' stop-color='%23E0A526' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 10H104' stroke='url(%23l)' stroke-width='1.6'/%3E%3Cpath d='M156 10H258' stroke='url(%23r)' stroke-width='1.6'/%3E%3Cpath d='M111 10L116 5.5 121 10 116 14.5z' fill='%23F08A1D'/%3E%3Cpath d='M139 10L144 5.5 149 10 144 14.5z' fill='%23F08A1D'/%3E%3Ccircle cx='130' cy='9' r='9' fill='%23F08A1D' opacity='.22'/%3E%3Cpath d='M122 11H138C138 16.5 134 18 130 18C126 18 122 16.5 122 11Z' fill='%23E0A526'/%3E%3Cpath d='M130 2C133 6 134 8.5 130 11.5C126 8.5 127 6 130 2Z' fill='%23FFC94D'/%3E%3C/svg%3E"); --fd-c-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg transform=''%3E%3Cpath d='M2 38V13C2 7 7 2 13 2H38' fill='none' stroke='%23E0A526' stroke-width='1.8'/%3E%3Cpath d='M8 38V18C8 12.5 12.5 8 18 8H38' fill='none' stroke='%23E0A526' stroke-width='.9' opacity='.75'/%3E%3Cpath d='M15 15Q24 12 27 20Q18 23 15 15Z' fill='%234C7A45'/%3E%3Cpath d='M15 15Q19 17 26 19' fill='none' stroke='%232E5A2E' stroke-width='.6'/%3E%3Ccircle cx='22' cy='5' r='1.7' fill='%23E0A526'/%3E%3Ccircle cx='5' cy='22' r='1.7' fill='%23E0A526'/%3E%3Ccircle cx='8' cy='8' r='6.2' fill='%23F08A1D' stroke='%23FFB02E' stroke-width='1.3' stroke-dasharray='1.5 1'/%3E%3Ccircle cx='8' cy='8' r='2.604' fill='%23FFC94D'/%3E%3C/g%3E%3C/svg%3E"); --fd-c-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg transform='translate(40 0) scale(-1 1)'%3E%3Cpath d='M2 38V13C2 7 7 2 13 2H38' fill='none' stroke='%23E0A526' stroke-width='1.8'/%3E%3Cpath d='M8 38V18C8 12.5 12.5 8 18 8H38' fill='none' stroke='%23E0A526' stroke-width='.9' opacity='.75'/%3E%3Cpath d='M15 15Q24 12 27 20Q18 23 15 15Z' fill='%234C7A45'/%3E%3Cpath d='M15 15Q19 17 26 19' fill='none' stroke='%232E5A2E' stroke-width='.6'/%3E%3Ccircle cx='22' cy='5' r='1.7' fill='%23E0A526'/%3E%3Ccircle cx='5' cy='22' r='1.7' fill='%23E0A526'/%3E%3Ccircle cx='8' cy='8' r='6.2' fill='%23F08A1D' stroke='%23FFB02E' stroke-width='1.3' stroke-dasharray='1.5 1'/%3E%3Ccircle cx='8' cy='8' r='2.604' fill='%23FFC94D'/%3E%3C/g%3E%3C/svg%3E"); --fd-c-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg transform='translate(0 40) scale(1 -1)'%3E%3Cpath d='M2 38V13C2 7 7 2 13 2H38' fill='none' stroke='%23E0A526' stroke-width='1.8'/%3E%3Cpath d='M8 38V18C8 12.5 12.5 8 18 8H38' fill='none' stroke='%23E0A526' stroke-width='.9' opacity='.75'/%3E%3Cpath d='M15 15Q24 12 27 20Q18 23 15 15Z' fill='%234C7A45'/%3E%3Cpath d='M15 15Q19 17 26 19' fill='none' stroke='%232E5A2E' stroke-width='.6'/%3E%3Ccircle cx='22' cy='5' r='1.7' fill='%23E0A526'/%3E%3Ccircle cx='5' cy='22' r='1.7' fill='%23E0A526'/%3E%3Ccircle cx='8' cy='8' r='6.2' fill='%23F08A1D' stroke='%23FFB02E' stroke-width='1.3' stroke-dasharray='1.5 1'/%3E%3Ccircle cx='8' cy='8' r='2.604' fill='%23FFC94D'/%3E%3C/g%3E%3C/svg%3E"); --fd-c-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg transform='translate(40 40) scale(-1 -1)'%3E%3Cpath d='M2 38V13C2 7 7 2 13 2H38' fill='none' stroke='%23E0A526' stroke-width='1.8'/%3E%3Cpath d='M8 38V18C8 12.5 12.5 8 18 8H38' fill='none' stroke='%23E0A526' stroke-width='.9' opacity='.75'/%3E%3Cpath d='M15 15Q24 12 27 20Q18 23 15 15Z' fill='%234C7A45'/%3E%3Cpath d='M15 15Q19 17 26 19' fill='none' stroke='%232E5A2E' stroke-width='.6'/%3E%3Ccircle cx='22' cy='5' r='1.7' fill='%23E0A526'/%3E%3Ccircle cx='5' cy='22' r='1.7' fill='%23E0A526'/%3E%3Ccircle cx='8' cy='8' r='6.2' fill='%23F08A1D' stroke='%23FFB02E' stroke-width='1.3' stroke-dasharray='1.5 1'/%3E%3Ccircle cx='8' cy='8' r='2.604' fill='%23FFC94D'/%3E%3C/g%3E%3C/svg%3E"); --fd-lantern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='70' viewBox='0 0 30 70'%3E%3Cdefs%3E%3CradialGradient id='w'%3E%3Cstop offset='0' stop-color='%23FFC94D'/%3E%3Cstop offset='.6' stop-color='%23F08A1D' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23F08A1D' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M15 0V16' stroke='%23E0A526' stroke-width='1'/%3E%3Cpath d='M10 16H20L19 21H11Z' fill='%23E0A526'/%3E%3Cpath d='M11 21H19C27 28 27 46 19 53H11C3 46 3 28 11 21Z' fill='%238E2A1A' stroke='%23E0A526' stroke-width='.8'/%3E%3Cellipse cx='15' cy='37' rx='7' ry='11' fill='url(%23w)'/%3E%3Cpath d='M15 21V53M11 21C5 29 5 45 11 53M19 21C25 29 25 45 19 53' fill='none' stroke='%23E0A526' stroke-width='.6' opacity='.8'/%3E%3Cpath d='M11 53H19L18 57H12Z' fill='%23E0A526'/%3E%3Cpath d='M15 57V66M13 57L12 64M17 57L18 64' stroke='%23E0A526' stroke-width='.9'/%3E%3Ccircle cx='15' cy='68' r='1.8' fill='%23F08A1D'/%3E%3C/svg%3E"); /* Sale badges read these two tokens. A festival only has to define them (its name for the sale and a small icon) to get festive discount badges. */ --pk-sale-label: "Diwali Sale"; --pk-sale-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='14' r='13' fill='%23F08A1D' opacity='.3'/%3E%3Cpath d='M3 18H29C29 27 23 30 16 30C9 30 3 27 3 18Z' fill='%23E0A526'/%3E%3Cpath d='M16 3C21.5 9.5 23 14 16 19C9 14 10.5 9.5 16 3Z' fill='%23FFC94D'/%3E%3Cpath d='M16 9C18.5 12 19 14.5 16 16.5C13 14.5 13.5 12 16 9Z' fill='%23FFF3C4'/%3E%3C/svg%3E"); --fd-kolam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23E0A526' stroke-opacity='.17' stroke-width='1'%3E%3Cellipse cx='36' cy='20' rx='4.2' ry='9' transform='rotate(0 36 36)'/%3E%3Cellipse cx='36' cy='20' rx='4.2' ry='9' transform='rotate(45 36 36)'/%3E%3Cellipse cx='36' cy='20' rx='4.2' ry='9' transform='rotate(90 36 36)'/%3E%3Cellipse cx='36' cy='20' rx='4.2' ry='9' transform='rotate(135 36 36)'/%3E%3Cellipse cx='36' cy='20' rx='4.2' ry='9' transform='rotate(180 36 36)'/%3E%3Cellipse cx='36' cy='20' rx='4.2' ry='9' transform='rotate(225 36 36)'/%3E%3Cellipse cx='36' cy='20' rx='4.2' ry='9' transform='rotate(270 36 36)'/%3E%3Cellipse cx='36' cy='20' rx='4.2' ry='9' transform='rotate(315 36 36)'/%3E%3Ccircle cx='36' cy='36' r='5'/%3E%3C/g%3E%3Cg fill='%23E0A526' fill-opacity='.2'%3E%3Ccircle cx='0' cy='0' r='1.6'/%3E%3Ccircle cx='72' cy='0' r='1.6'/%3E%3Ccircle cx='0' cy='72' r='1.6'/%3E%3Ccircle cx='72' cy='72' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); } /* ---- Sections: a marigold garland across the top ------------------ */ .geru-section, .pk-ratings-section, .pk-combos-showcase-section, .pk-collections-showcase-section { position: relative; } .geru-section::before, .pk-ratings-section::before, .pk-combos-showcase-section::before, .pk-collections-showcase-section::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 20px; background: var(--fd-garland) repeat-x center top / 40px 20px; pointer-events: none; z-index: 1; } /* The dark price section gets a row of lit diyas instead. */ .geru-bg-ink::before { height: 26px; background: var(--fd-diyas) repeat-x center top / 52px 26px; } /* ---- Lanterns hanging from the garland, one at each edge (wide screens) --- */ @media (min-width: 1280px) { .geru-section::after, .pk-ratings-section::after, .pk-combos-showcase-section::after, .pk-collections-showcase-section::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 70px; background: var(--fd-lantern) no-repeat 8px 0 / 30px 70px, var(--fd-lantern) no-repeat calc(100% - 8px) 0 / 30px 70px; pointer-events: none; z-index: 1; } } /* ---- Cream sections: a faint doorstep kolam in the background ------ */ .geru-bg-rice, .geru-bg-paper, .pk-ratings-section, .pk-combos-showcase-section, .pk-collections-showcase-section { /* Diyas along the bottom edge, the kolam behind everything. */ background-image: var(--fd-diyas), var(--fd-kolam); background-position: center bottom, 0 0; background-repeat: repeat-x, repeat; background-size: 52px 26px, 72px 72px; } /* ---- Headings: a diya, a diamond and a fading gold line ------------- */ .geru-heading-row h2::after { content: ""; display: block; width: 180px; height: 20px; margin-top: 14px; background: var(--fd-flourish) left center / 180px 20px no-repeat; } .geru-heading-center h2::after { width: 260px; margin-left: auto; margin-right: auto; background: var(--fd-flourish-c) center / 260px 20px no-repeat; } /* ---- Product cards: a double gold frame with marigold corners ------- The corners sit underneath the discount badge and the wishlist heart, which live in the top corners of the image. */ .geru-product-card { position: relative; box-shadow: 0 0 0 1px rgba(224, 165, 38, .8), 0 0 0 6px var(--pk-paper), 0 0 0 7px rgba(224, 165, 38, .45); transition: box-shadow .25s ease; } .geru-product-card:hover { box-shadow: 0 0 0 1px var(--pk-fd-gold), 0 0 0 6px var(--pk-paper), 0 0 0 7px var(--pk-fd-gold), 0 12px 28px rgba(224, 165, 38, .32); } /* The photo runs edge to edge inside the frame; the text lines get room so they don't touch the gold border. */ .geru-product-card { padding-bottom: 14px; } .geru-product-card > .geru-product-craft, .geru-product-card > .geru-product-title, .geru-product-card > .geru-product-rating, .geru-product-card > .geru-product-price-row { padding-inline: 14px; } .geru-product-card::before { content: ""; position: absolute; inset: -8px; background: var(--fd-c-tl) top left / 28px 28px no-repeat, var(--fd-c-tr) top right / 28px 28px no-repeat, var(--fd-c-bl) bottom left / 28px 28px no-repeat, var(--fd-c-br) bottom right / 28px 28px no-repeat; pointer-events: none; z-index: 1; } /* Two-column grids (tablet and phone) are only 16px apart, which is less than the frames need: neighbouring corners would touch. Give them room. */ @media (max-width: 991px) { :root[data-festive] .geru-product-grid { gap: 28px 24px; } } /* Listing and related-products cards: gold edge, a dashed inner line, and corners at the bottom only (the top corners hold the badges). */ .product-list-listing-box { border-color: rgba(224, 165, 38, .8); } .product-list-listing-box::before { content: ""; position: absolute; inset: 5px; border: 1px dashed rgba(224, 165, 38, .65); border-radius: 10px; pointer-events: none; z-index: 2; } .product-list-listing-box::after { content: ""; position: absolute; inset: 0; background: var(--fd-c-bl) left bottom / 30px 30px no-repeat, var(--fd-c-br) right bottom / 30px 30px no-repeat; pointer-events: none; z-index: 2; } .product-list-listing-box:hover { box-shadow: 0 12px 28px rgba(224, 165, 38, .32); } /* ---- Listing header card ------------------------------------------ */ .product-list-heading-bg { border: 1px solid rgba(224, 165, 38, .8); } .product-list-heading-bg::after { content: ""; position: absolute; inset: 0; background: var(--fd-c-tl) top left / 26px 26px no-repeat, var(--fd-c-bl) bottom left / 26px 26px no-repeat, var(--fd-c-br) bottom right / 26px 26px no-repeat; pointer-events: none; z-index: 1; } /* ---- Craft tiles: the same double gold frame as the product cards ------ Drawn around the tile, not over the photo. The tile stops clipping so the corners can sit outside it; its picture and shade fill the box exactly, so nothing else spills, and the hover zoom is dropped. */ :root[data-festive] .geru-craft-tile { overflow: visible; box-shadow: 0 0 0 1px rgba(224, 165, 38, .8), 0 0 0 6px var(--pk-paper), 0 0 0 7px rgba(224, 165, 38, .45); } :root[data-festive] .geru-craft-tile:hover img { transform: none; } /* A little more air between tiles so neighbouring frames don't touch. */ :root[data-festive] .geru-craft-row-lg { gap: 30px; } :root[data-festive] .geru-craft-row-sm { gap: 30px; margin-top: 30px; } .geru-craft-tile::after { content: ""; position: absolute; inset: -8px; background: var(--fd-c-tl) top left / 28px 28px no-repeat, var(--fd-c-tr) top right / 28px 28px no-repeat, var(--fd-c-bl) bottom left / 28px 28px no-repeat, var(--fd-c-br) bottom right / 28px 28px no-repeat; pointer-events: none; z-index: 2; } /* ---- Offers pop-up on the product page ---------------------------------- A garland over the red header, a diya in place of the gift, the festival's sale name above the title, a gold frame inside the card, and a row of diyas above the button. */ :root[data-festive] .coupon-offers-modal-content { position: relative; } :root[data-festive] .coupon-offers-modal-content::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(224, 165, 38, .75); border-radius: 10px; background: var(--fd-c-tl) top left / 30px 30px no-repeat, var(--fd-c-tr) top right / 30px 30px no-repeat, var(--fd-c-bl) bottom left / 30px 30px no-repeat, var(--fd-c-br) bottom right / 30px 30px no-repeat; pointer-events: none; z-index: 3; } :root[data-festive] .coupon-offers-modal-header { position: relative; background-image: var(--fd-kolam); background-size: 72px 72px; } :root[data-festive] .coupon-offers-modal-header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 20px; background: var(--fd-garland) repeat-x center top / 40px 20px; } :root[data-festive] .coupon-offers-modal-icon { background: rgba(255, 201, 77, .18) var(--pk-sale-icon) center / 34px 34px no-repeat; box-shadow: 0 0 0 1px rgba(255, 201, 77, .55), 0 0 18px rgba(240, 138, 29, .4); } :root[data-festive] .coupon-offers-modal-icon .fa-gift { display: none; } :root[data-festive] .coupon-offers-modal-title::before { content: var(--pk-sale-label); display: block; margin-bottom: 4px; color: var(--pk-fd-flame); font-family: var(--pk-font-body, inherit); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } :root[data-festive] .coupon-ticket { border-color: rgba(224, 165, 38, .9); background-image: var(--fd-kolam); background-size: 72px 72px; } :root[data-festive] .coupon-ticket-discount::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 6px; vertical-align: -4px; background: var(--pk-sale-icon) center / contain no-repeat; } /* Keep the close button clear of the frame's top-right corner. */ :root[data-festive] .coupon-offers-modal-close { top: 22px; right: 28px; } :root[data-festive] .coupon-offers-modal-footer { position: relative; padding-top: 34px; } :root[data-festive] .coupon-offers-modal-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 26px; background: var(--fd-diyas) repeat-x center / 52px 26px; pointer-events: none; } /* ---- Story blocks (dark): the text panel gets a framed inner border ----- Only the coloured panel is framed; the photo beside it stays clean. */ .geru-story-text::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(235, 180, 78, .55); background: var(--fd-c-tl) top left / 34px 34px no-repeat, var(--fd-c-tr) top right / 34px 34px no-repeat, var(--fd-c-bl) bottom left / 34px 34px no-repeat, var(--fd-c-br) bottom right / 34px 34px no-repeat; pointer-events: none; z-index: 2; } /* ---- Price tiles (dark) -------------------------------------------- */ .geru-price-tile { position: relative; } .geru-price-tile::after { content: ""; position: absolute; inset: 5px; border: 1px dashed rgba(235, 180, 78, .5); background: var(--fd-c-bl) left bottom / 22px 22px no-repeat, var(--fd-c-br) right bottom / 22px 22px no-repeat; pointer-events: none; } /* ---- Review cards --------------------------------------------------- */ .pk-review-card, .review-card-modern { position: relative; } .pk-review-card::after, .review-card-modern::after { content: ""; position: absolute; inset: 4px; border: 1px dashed rgba(224, 165, 38, .55); border-radius: 12px; pointer-events: none; } /* ---- The sticky header keeps a thin gold edge as you scroll --------- */ .geru-header-bar { box-shadow: 0 2px 0 var(--pk-fd-gold); } /* ---- Combo cards and collection cards ---------------------------- */ .pk-combo-card, .pk-collection-card { position: relative; } .pk-combo-card::after, .pk-collection-card::after { content: ""; position: absolute; inset: 5px; border: 1px dashed rgba(224, 165, 38, .65); border-radius: 12px; background: var(--fd-c-bl) left bottom / 28px 28px no-repeat, var(--fd-c-br) right bottom / 28px 28px no-repeat; pointer-events: none; z-index: 2; } /* ---- Centred headings elsewhere get the centred flourish ---------- */ .pk-combos-showcase-heading::after, .pk-collections-showcase-heading::after, .pk-ratings-title::after { content: ""; display: block; width: 260px; height: 20px; margin: 14px auto 0; background: var(--fd-flourish-c) center / 260px 20px no-repeat; } /* ---- Sale badges: the festival's name beside the discount ------------ "31% OFF" becomes "Diwali Sale ยท 31% OFF" with a diya. The words come from --pk-sale-label and are added in CSS, so the percentage that the page (or the variant picker script) writes is untouched. On the photo cards the label sits above the percentage; on the product page it leads the line. */ :root[data-festive] .discount-badge, :root[data-festive] .geru-product-badge, :root[data-festive] .pk-discount-badge { background-image: var(--pk-sale-icon); background-repeat: no-repeat; background-size: 18px 18px; background-position: 8px center; padding-left: 32px; } :root[data-festive] .discount-badge { background-color: var(--pk-geru); background-position: 10px center; padding-left: 34px; } :root[data-festive] .discount-badge::before { content: var(--pk-sale-label) " \00B7 "; } :root[data-festive] .geru-product-badge, :root[data-festive] .pk-discount-badge { line-height: 1.3; } :root[data-festive] .geru-product-badge::before, :root[data-festive] .pk-discount-badge::before { content: var(--pk-sale-label); display: block; color: var(--pk-fd-flame); font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } /* ---- Product page --------------------------------------------------- The main photo sits inside a double gold frame with marigold corners, drawn around it so nothing covers the picture. The container used to clip (overflow hidden); the photo box inside it still clips its own zoom. The cards beside it get a dashed gold inner line and corners at the bottom. */ .product-gallery .main-image-container { overflow: visible; border-radius: 4px; box-shadow: 0 0 0 1px rgba(224, 165, 38, .8), 0 0 0 6px var(--pk-paper), 0 0 0 7px rgba(224, 165, 38, .45); } .product-gallery .main-image-container .main-image { border-radius: 4px; } .product-gallery .main-image-container::after { content: ""; position: absolute; inset: -8px; background: var(--fd-c-tl) top left / 28px 28px no-repeat, var(--fd-c-tr) top right / 28px 28px no-repeat, var(--fd-c-bl) bottom left / 28px 28px no-repeat, var(--fd-c-br) bottom right / 28px 28px no-repeat; pointer-events: none; z-index: 3; } .coupon-offers-card, .pk-delivery-card, .pk-cod-card { position: relative; } .coupon-offers-card::after, .pk-delivery-card::after, .pk-cod-card::after { content: ""; position: absolute; inset: 4px; border: 1px dashed rgba(224, 165, 38, .6); border-radius: 10px; background: var(--fd-c-bl) left bottom / 26px 26px no-repeat, var(--fd-c-br) right bottom / 26px 26px no-repeat; pointer-events: none; } .nav-tabs-custom { border-bottom-color: var(--pk-fd-gold); } /* ---- Lanterns hanging from the toran on very wide screens ------------ Only where the page margins leave room, so they never sit on content. */ @media (min-width: 1500px) { .pk-fd-strip:not(.pk-fd-strip--footer) { position: relative; } .pk-fd-strip:not(.pk-fd-strip--footer)::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 70px; background: var(--fd-lantern) no-repeat 14px 0 / 30px 70px, var(--fd-lantern) no-repeat calc(100% - 14px) 0 / 30px 70px; pointer-events: none; z-index: 2; } }