/* My Telly live - styles (my-telly-live.php) - moved out of my-telly-live.php by FIX 183 so browsers keep it (was sent inside every page). The page sets window.X just before loading this file. Edit it here, not in my-telly-live.php. */ #productsContainer{ width:20%;overflow-y:hidden;float:right;padding-left:0px;overflow:auto;padding-top:0px;height:100% } /* If browser supports aspect-ratio property */ @supports (aspect-ratio: 16 / 9) { #video { aspect-ratio: 16 / 9; } } /* If browser does not support aspect-ratio property */ @supports not (aspect-ratio: 16 / 9) { #video { width: 66%; } #productsContainer{ width:34% } } #homepage_youtube { width:100%;height:100% } .width-50-percent{ width:50% !important } .width-100-percent{ width:100% !important } .fwfl{ width:100%; float:left; } .pr{ position:relative } .pa{ position:absolute } .pf{ position:fixed } .cp{ cursor:pointer } .dn{ display:none } .width-30{ width:30% } .width-70{ width:70% } .qr-holder img{ width:100% } .fl{ float:left } #containerWidth{ width:100%; background:transparent; } .message { display:none; flex-direction: column; justify-content: center; align-items: center; font-size: 24px; color: #fff; text-align:center; width:100%; } @media ( max-width: 768px ) { .message { display:none; flex-direction: column; justify-content: center; align-items: center; font-size: 16px; color: #fff; text-align:center; width:100%; } } .disabled-link { pointer-events: none; cursor: not-allowed; background: #CECECE !important; } .pc-product-img-holder img { width: 100%; display: block; } .arrow { position: absolute; margin-top:50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.3); color: #fff; border: none; padding: 8px 12px; cursor: pointer; font-size: 18px; display: none; } .arrow.left { left: 5px; } .arrow.right { right: 5px; } /* ---- Desktop layout (window 992px+ wide) ---- Sizes come from the browser WINDOW (see sizeMyTellyPage below), not the monitor, so PCs and Macs match the TV. Video as large as fits at 16:9 on a dark stage, product column on the right. */ html.mt-desktop body{ background:#1b1519 !important; } html.mt-desktop #welcome-message-holder{ padding-bottom:0 !important; } html.mt-desktop #welcome-message-holder .welcome-message{ padding-top:20px !important; padding-bottom:20px !important; font-size:17px !important; } html.mt-desktop #welcome-message-holder .welcome-message br{ display:none; } html.mt-desktop #clock{ top:8px; } html.mt-desktop #bottomText{ display:none !important; } html.mt-desktop #videoAndProductsContainer{ display:flex !important; align-items:stretch; width:100% !important; height:var(--mt-height) !important; background:#1b1519 !important; } html.mt-desktop .mt-stage{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:#1b1519; } html.mt-desktop #video{ float:none !important; flex:0 0 auto; width:var(--mt-video-w) !important; height:var(--mt-video-h) !important; aspect-ratio:auto !important; background:#000; } html.mt-desktop #productsContainer{ float:none !important; flex:0 0 var(--mt-products-w); width:var(--mt-products-w) !important; height:var(--mt-height) !important; overflow-x:hidden !important; overflow-y:auto !important; background:#fff !important; border-left:1px solid #eee3e8; padding-bottom:0 !important; box-sizing:border-box; } html.mt-desktop #productsContainer .container{ width:100% !important; padding:0 !important; margin:0 !important; } html.mt-desktop #productsContainer .container > .row{ margin:0 !important; padding-top:0 !important; } html.mt-desktop #productsContainer::-webkit-scrollbar{ width:8px; } html.mt-desktop #productsContainer::-webkit-scrollbar-thumb{ background:#dccbd3; border-radius:4px; } /* column heading */ .mt-col-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 20px 14px 24px; border-bottom:1px solid #eee3e8; background:#fff; } .mt-col-title{ font-size:15px; font-weight:700; letter-spacing:2px; color:#231d20; } .mt-col-sub{ font-size:12px; color:#6d5d65; margin-top:2px; } /* ---- LANGUAGE: top right of SHOP THE SHOW - translates the product column only ---- */ .mt-col-head{ position:relative; } .mt-col-head > div:first-child{ padding-right:96px; } .mt-lang{ position:absolute; top:12px; right:16px; z-index:60; } .mt-lang-btn{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; box-sizing:border-box; cursor:pointer; border:2px solid #8e3560; border-radius:15px; background:#fff; color:#8e3560; font-family:inherit; font-size:11px; font-weight:700; letter-spacing:1px; } .mt-lang-btn:hover{ background:#f2e6ec; } .mt-lang-btn.mt-lang-on{ background:#8e3560; color:#fff; } /* the list is lifted out onto the page itself, so it sits above every banner and panel */ .mt-lang-menu{ display:none; position:fixed; z-index:2147483000; min-width:150px; padding:5px 0; background:#fff; border:2px solid #8e3560; box-shadow:0 10px 24px rgba(35,29,32,.25); } .mt-lang-menu.mt-lang-menu-open{ display:block; } .mt-lang-menu button{ display:block; width:100%; padding:8px 14px; border:0; background:transparent; color:#231d20; text-align:left; cursor:pointer; font-family:inherit; font-size:12px; font-weight:700; letter-spacing:1px; white-space:nowrap; } .mt-lang-menu button:hover, .mt-lang-menu button:focus{ background:#fbf3f7; outline:none; } .mt-lang-menu button.mt-lang-picked{ background:#8e3560; color:#fff; } /* the "do you want the subtitles / product list in German too?" pop-up */ #mtLangAsk{ position:fixed; z-index:2147483100; left:50%; top:22%; transform:translateX(-50%); width:360px; max-width:calc(100vw - 24px); box-sizing:border-box; background:#fff; border-top:6px solid #8e3560; box-shadow:0 18px 50px rgba(0,0,0,.45); padding:18px 20px 16px; font-family:'Montserrat','Helvetica Neue',Arial,sans-serif; color:#231d20; } #mtLangAsk .mla-flag{ font-size:11px; font-weight:700; letter-spacing:1.5px; color:#8e3560; margin-bottom:6px; } #mtLangAsk .mla-q{ margin:0 0 4px; font-size:16px; font-weight:700; line-height:1.35; } #mtLangAsk .mla-en{ margin:0 0 14px; font-size:12px; color:#6d5d65; line-height:1.4; } #mtLangAsk .mla-btns{ display:flex; gap:8px; } #mtLangAsk .mla-btns button{ flex:1 1 0; height:40px; border:2px solid #8e3560; background:#fff; color:#8e3560; font-family:inherit; font-size:12px; font-weight:700; letter-spacing:1px; cursor:pointer; } #mtLangAsk .mla-btns button.mla-yes{ background:#8e3560; color:#fff; } #mtLangAsk .mla-btns button:hover, #mtLangAsk .mla-btns button:focus{ outline:none; filter:brightness(1.08); } /* the flag after HOW TO CRAFT NETWORK, top left, for the language picked. It pops in, then gently waves with a shine running across it. Drawn in SVG so it looks the same everywhere (Windows does not draw flag emojis). */ .mt-flag{ display:inline-block; vertical-align:middle; margin:-6px 0 -6px 14px; perspective:220px; } .mt-flag:empty{ display:none; } .mt-flag .mt-flag-in{ position:relative; display:block; width:42px; height:28px; border-radius:4px; overflow:hidden; border:2px solid #fff; box-shadow:0 3px 10px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.08); transform-origin:left center; animation:mtFlagPop .7s cubic-bezier(.2,1.6,.4,1) both, mtFlagWave 3.2s ease-in-out .7s infinite; } .mt-flag svg{ display:block; width:100%; height:100%; } .mt-flag .mt-flag-in::after{ content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%; background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 100%); transform:skewX(-18deg); animation:mtFlagShine 3.2s ease-in-out .9s infinite; } @keyframes mtFlagPop{ 0%{ transform:scale(0) rotate(-25deg); opacity:0; } 100%{ transform:scale(1) rotate(0); opacity:1; } } @keyframes mtFlagWave{ 0%,100%{ transform:rotateY(0) skewY(0); } 25%{ transform:rotateY(-14deg) skewY(-2deg); } 75%{ transform:rotateY(10deg) skewY(1.5deg); } } @keyframes mtFlagShine{ 0%{ left:-60%; } 45%,100%{ left:130%; } } html.mt-phone .mt-flag, html.mt-portrait .mt-flag{ margin:0 0 0 14px; } /* FIX 242: more room on phones */ html.mt-phone .mt-flag .mt-flag-in, html.mt-portrait .mt-flag .mt-flag-in{ width:33px; height:22px; border-width:1.5px; } @media (prefers-reduced-motion: reduce){ .mt-flag .mt-flag-in, .mt-flag .mt-flag-in::after{ animation:none; } } .mt-lang-note{ padding:6px 14px 4px; border-top:1px solid #eee3e8; margin-top:4px; font-size:9px; letter-spacing:.5px; color:#9d8a93; white-space:nowrap; } html.mt-phone .mt-col-head > div:first-child{ padding-right:80px; } html.mt-phone .mt-lang{ top:6px; right:8px; } html.mt-phone .mt-lang-btn{ height:24px; padding:0 8px; font-size:9px; } /* Google's translation bar, pop-ups and highlights are not wanted on this page */ #mt_gt{ position:absolute !important; left:-9999px !important; top:0 !important; width:1px; height:1px; overflow:hidden; } body{ top:0 !important; } body > .skiptranslate, iframe.skiptranslate, .goog-te-banner-frame{ display:none !important; } #goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip{ display:none !important; } .goog-text-highlight{ background:none !important; box-shadow:none !important; } html.mt-desktop #showQuickLinksMyTelly{ position:static !important; width:auto !important; height:36px; padding:0 14px; line-height:36px; font-size:12px; font-weight:700; letter-spacing:1px; } /* product cards - built to match the mockup (see mtBuildCard in the script). The site's original card stays in the page, hidden, and is shown again when a product's details are opened (so buying, notify-me and the details view all still work). */ html.mt-desktop #productsContainer{ font-family:'Montserrat', 'Helvetica Neue', sans-serif; color:#231d20; } html.mt-desktop #productListRow > .product-item{ padding:0 !important; border-bottom:1px solid #f1e8ec; box-sizing:border-box; background:#fff; } #productListRow:not(.mt-pdp-open) > .product-item > :not(.mt-card):not(.mt-card-top):not(.added-message-holder-parent):not(.plpStockStatus){ display:none !important; } #productListRow.mt-pdp-open .mt-card, #productListRow.mt-pdp-open .mt-card-top{ display:none !important; } #productListRow.mt-pdp-open > .product-item{ padding:10px 20px !important; } #productListRow > .product-item > .added-message-holder-parent, #productListRow > .product-item > .plpStockStatus{ padding:0 20px 10px 24px; box-sizing:border-box; } .mt-card{ display:flex; gap:16px; align-items:flex-start; padding:14px 20px 14px 24px; box-sizing:border-box; width:100%; float:left; } .mt-img{ flex:0 0 110px; width:110px; height:110px; padding:0; border:0; background:#f6f1f3; cursor:pointer; overflow:hidden; } .mt-img img{ width:100%; height:100%; object-fit:contain; display:block; } .mt-info{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:8px; min-height:110px; } .mt-title{ padding:0; border:0; background:none; text-align:left; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; line-height:1.35; color:#231d20; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; } .mt-title:hover{ color:#8e3560; } .mt-price{ display:flex; align-items:baseline; gap:6px; } .mt-was{ font-size:12px; color:#6d5d65; text-decoration:line-through; } .mt-now-price{ font-size:15px; font-weight:700; color:#231d20; } .mt-now-price.mt-sale{ color:#c0305a; } .mt-actions{ display:flex; gap:8px; align-items:center; margin-top:auto; } .mt-jump{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px; border:0; border-radius:17px; background:#f2e6ec; color:#8e3560; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; } .mt-jump:hover, .mt-jump:focus{ background:#8e3560; color:#fff; } .mt-buy{ flex:1 1 auto; height:34px; padding:0 8px; border:0; background:#CB889A; color:#fff; font-family:inherit; font-size:12px; font-weight:700; letter-spacing:1px; white-space:nowrap; cursor:pointer; } .mt-buy:hover, .mt-buy:focus{ background:#8e3560; } .mt-soldout{ flex:1 1 auto; text-align:right; font-size:12px; font-weight:700; letter-spacing:1px; color:#c0305a; } .mt-bigbuy{ display:none; } /* on screen now / coming up (the card at the top) */ .mt-card-top{ display:none; width:100%; float:left; padding:18px 20px 0 24px; box-sizing:border-box; } #productListRow > .product-item.mt-now{ background:#fbf3f7; } #productListRow > .product-item.mt-now .mt-card-top{ display:block; } #productListRow > .product-item.mt-now .mt-card{ flex-wrap:wrap; padding-top:12px; padding-bottom:20px; } #productListRow > .product-item.mt-now .mt-img{ flex-basis:150px; width:150px; height:150px; background:#fff; border:1px solid #eadde3; } #productListRow > .product-item.mt-now .mt-info{ min-height:0; gap:10px; } #productListRow > .product-item.mt-now .mt-title{ font-size:14px; font-weight:700; } #productListRow > .product-item.mt-now .mt-was{ font-size:13px; } #productListRow > .product-item.mt-now .mt-now-price{ font-size:18px; } #productListRow > .product-item.mt-now .mt-actions{ display:none; } #productListRow > .product-item.mt-now .mt-bigbuy{ display:block; flex:0 0 100%; height:48px; border:0; background:#8e3560; color:#fff; font-family:inherit; font-size:14px; font-weight:700; letter-spacing:2px; cursor:pointer; } #productListRow > .product-item.mt-now .mt-bigbuy:hover{ background:#6e2749; } .mt-now-label{ font-size:11px; font-weight:700; letter-spacing:1.5px; color:#8e3560; } .mt-now-label .mt-dot{ display:inline-block; width:8px; height:8px; border-radius:4px; background:#c0305a; margin-right:6px; vertical-align:1px; } .mt-section-label{ padding:14px 20px 6px 24px; font-size:11px; font-weight:700; letter-spacing:1.5px; color:#6d5d65; background:#fff; } /* ---- banner: title left, clock right ---- */ .mt-brand{ display:none; } html.mt-desktop .welcome-message{ position:relative; font-family:'Montserrat', 'Helvetica Neue', sans-serif !important; } html.mt-desktop .mt-brand{ display:block; position:absolute; left:28px; top:50%; transform:translateY(-50%); font-size:15px; font-weight:700; letter-spacing:2.5px; color:#fff; } html.mt-desktop #clock{ top:50% !important; right:28px !important; transform:translateY(-50%); width:auto !important; text-align:right; line-height:1.2; } html.mt-desktop #clock div.date{ margin:0 !important; font-size:12px !important; font-weight:600; color:#fff; } html.mt-desktop #clock div.time{ font-size:20px !important; font-weight:700 !important; color:#fff; letter-spacing:1px; } html.mt-desktop #clock div.time span{ background:none !important; color:#fff !important; padding:0 !important; border-radius:0 !important; } html.mt-desktop #clock div.time strong{ display:none; } /* slim banner: as thin as it can be - one line of words, the clock's date and time side by side, so the video and its timeline get the height back */ html.mt-desktop:not(.mt-phone):not(.mt-portrait) #welcome-message-holder .welcome-message{ padding-top:6px !important; padding-bottom:6px !important; font-size:14px !important; line-height:22px !important; } html.mt-desktop:not(.mt-phone):not(.mt-portrait) #clock{ display:flex; align-items:baseline; gap:10px; line-height:1 !important; } html.mt-desktop:not(.mt-phone):not(.mt-portrait) #clock div.date{ font-size:12px !important; } html.mt-desktop:not(.mt-phone):not(.mt-portrait) #clock div.time{ font-size:16px !important; } html.mt-desktop:not(.mt-phone):not(.mt-portrait) .mt-brand{ font-size:14px; } html.mt-desktop:not(.mt-phone):not(.mt-portrait) .mt-flag{ margin-top:-5px; margin-bottom:-5px; } html.mt-desktop:not(.mt-phone):not(.mt-portrait) .mt-flag .mt-flag-in{ width:36px; height:24px; } /* ---- stock banners (SELLING FAST, LIMITED STOCK...) under the BUY button, same width ---- */ #productListRow:not(.mt-pdp-open) .mt-card .plpStockStatus{ display:flex; flex-direction:column; gap:4px; width:100%; margin:0; padding:0; } #productListRow:not(.mt-pdp-open) .mt-card .plpStockStatus.hide{ display:none !important; } #productListRow:not(.mt-pdp-open) .mt-card .plpStockStatus > div{ float:none !important; width:100% !important; margin:0 !important; padding:0 !important; } #productListRow:not(.mt-pdp-open) .mt-card .plpStockStatus > div > div:first-child:not(:last-child){ display:none !important; } #productListRow:not(.mt-pdp-open) .mt-card .plpStockStatus > div > div:last-child{ float:none !important; width:100% !important; height:24px; line-height:24px; padding:0 !important; font-size:11px !important; font-weight:700; letter-spacing:1.5px; } #productListRow:not(.mt-pdp-open) .mt-card .plpStockStatus [class*="count-items-in-cart-"]{ text-align:left !important; color:#c0305a !important; font-size:11px !important; line-height:1.3; letter-spacing:.5px; } #productListRow:not(.mt-pdp-open) .mt-card .plpStockStatus [class*="count-items-in-cart-"] strong{ font-weight:700; } .mt-info .plpStockStatus{ margin-top:-4px !important; } #productListRow > .product-item.mt-now .mt-card > .plpStockStatus{ flex:0 0 100%; margin-top:-8px !important; } #productListRow > .product-item.mt-now .mt-card .plpStockStatus > div > div:last-child{ height:30px; line-height:30px; font-size:12px !important; } html.mt-phone #productListRow:not(.mt-pdp-open) .mt-card .plpStockStatus > div > div:last-child{ height:20px; line-height:20px; font-size:9px !important; } /* ON AIR NOW banner inside the product's own page (clicked through from the list) */ .mt-onair-flag{ display:none; } #productListRow.mt-pdp-open > .product-item.mt-now.mt-open .mt-onair-flag{ display:block; width:100%; float:left; height:26px; line-height:26px; margin-bottom:14px; background:#c0305a; color:#fff; text-align:center; font-size:11px; font-weight:700; letter-spacing:1.5px; } #productListRow.mt-pdp-open > .product-item.mt-now.mt-open .mt-onair-flag .mt-dot{ display:inline-block; width:8px; height:8px; border-radius:4px; background:#fff; margin-right:6px; vertical-align:1px; animation:mtPulse 1.6s infinite; } html.mt-phone #productListRow.mt-pdp-open > .product-item.mt-now.mt-open .mt-onair-flag{ height:22px; line-height:22px; font-size:10px; margin-bottom:10px; } /* ON AIR NOW label on the product at the top of the live list */ #productListRow > .product-item.mt-now .mt-now-label{ color:#c0305a; } #productListRow > .product-item.mt-now .mt-now-label .mt-dot{ animation:mtPulse 1.6s infinite; } /* ---- ON AIR card: 30% softer again (chosen from the mock, 18 Sep) ---- soft pink card, red stripe down the left, pink pill label, soft line underneath */ #productListRow > .product-item.mt-now{ background:#e5c7d1 !important; box-shadow:inset 6px 0 0 #c0305a, inset 0 3px 3px -2px #f3e7ec; border-bottom:2px solid #f2dee7 !important; } #productListRow > .product-item.mt-now .mt-now-label{ display:inline-flex; align-items:center; height:22px; padding:0 12px 0 10px; border-radius:12px; background:#c0305a; color:#fff; font-size:11px; font-weight:700; letter-spacing:1.5px; line-height:22px; } #productListRow > .product-item.mt-now .mt-now-label .mt-dot{ background:#f4b6c8; margin-right:8px; } html.mt-phone #productListRow > .product-item.mt-now .mt-now-label{ height:18px; line-height:18px; padding:0 9px 0 8px; font-size:9px; } /* LIVE NOW label in the buttons bar */ .mt-live{ color:#fff; font-weight:700; letter-spacing:2px; } .mt-live .mt-dot{ display:inline-block; width:9px; height:9px; border-radius:5px; background:#e0335f; margin-right:6px; vertical-align:0; animation:mtPulse 1.6s infinite; } @keyframes mtPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } } /* ---- sold out sits next to the price ---- */ .mt-price .mt-soldout{ flex:0 0 auto !important; margin-left:10px; text-align:left !important; } /* ---- product details view (opened from a card) ---- */ html.mt-desktop #closePdp{ padding:14px 24px; box-sizing:border-box; font-size:12px; font-weight:700; letter-spacing:1.5px; color:#8e3560; border-bottom:1px solid #eee3e8; } html.mt-desktop #closePdp .fa{ margin-right:6px; } #productListRow.mt-pdp-open > .product-item{ padding:0 !important; border-bottom:0 !important; } #productListRow.mt-pdp-open > .product-item.mt-open{ padding:16px 24px 24px !important; } #productListRow.mt-pdp-open .mt-open .watch-live-img-title{ display:flex !important; gap:16px; align-items:flex-start; width:100%; float:none !important; } #productListRow.mt-pdp-open .mt-open .pc-product-img-holder, #productListRow.mt-pdp-open .mt-open .pc-product-img-holder.width-100-percent{ flex:0 0 50%; width:50% !important; margin:0 !important; position:relative; } #productListRow.mt-pdp-open .mt-open .item-number-holder{ font-size:11px !important; font-weight:700; letter-spacing:1px; color:#6d5d65; margin:8px 0 0 !important; } #productListRow.mt-pdp-open .mt-open .scan-qr-number-holder{ display:none !important; } .mt-pdp-qr{ display:none; } #productListRow.mt-pdp-open .mt-open .mt-pdp-qr{ display:block; flex:1 1 0; min-width:0; text-align:center; font-size:11px; line-height:1.4; color:#6d5d65; } #productListRow.mt-pdp-open .mt-open .mt-pdp-qr [id^="watchLiveQr-"], #productListRow.mt-pdp-open .mt-open .mt-pdp-qr .qr-holder{ display:block !important; padding:0 !important; } .mt-pdp-qr [id^="qrCodeMyTellyLive-"] img, .mt-pdp-qr [id^="qrCodeMyTellyLive-"] canvas{ width:100%; max-width:160px; height:auto; margin:0 auto; border:1px solid #eadde3; padding:6px; background:#fff; box-sizing:border-box; } .mt-pdp-qr .col-md-12{ float:none; width:auto; padding:8px 0 0 !important; } .mt-pdp-qr .col-md-12 br{ display:none; } .mt-pdp-qr .col-md-12 > strong:first-child{ display:block; font-size:11px; letter-spacing:1.5px; color:#8e3560; margin-bottom:4px; } .mt-pdp-qr .col-md-12 > strong:nth-of-type(2){ display:block; color:#231d20; } .mt-pdp-qr .col-md-12 p{ margin:6px 0 0 !important; font-size:20px !important; letter-spacing:2px; } #productListRow.mt-pdp-open .watch-live-qr{ display:none !important; } #productListRow.mt-pdp-open .mt-section-label{ display:none !important; } /* details view: a little air under the SELL OUT RISK / SELLING FAST banner (the details view uses .pdpStockStatus; the card list uses .plpStockStatus) */ #productListRow.mt-pdp-open .mt-open .pdpStockStatus, #productListRow.mt-pdp-open .mt-open .plpStockStatus{ display:block !important; overflow:hidden; padding:0 0 14px !important; } #productListRow.mt-pdp-open .mt-open .pdpStockStatus > div, #productListRow.mt-pdp-open .mt-open .plpStockStatus > div{ margin-top:0 !important; margin-bottom:6px !important; } #productListRow.mt-pdp-open .mt-open .pdpStockStatus > div > div{ height:26px; line-height:26px; font-size:11px !important; font-weight:700; letter-spacing:1.5px; } /* sold out: SOLD OUT badge under the QR code, NOTIFY ME full width on the left */ #productListRow.mt-pdp-open .mt-open .watch-live-buy{ flex-wrap:wrap; } #productListRow.mt-pdp-open .mt-open .watch-live-buy-button.mt-empty{ display:none !important; } #productListRow.mt-pdp-open .mt-open .watch-live-buy > div:not(.watch-live-price):not(.watch-live-buy-button){ flex:0 0 100%; width:100% !important; height:auto !important; margin:0 !important; padding:0 !important; float:none !important; text-align:left !important; } #productListRow.mt-pdp-open .mt-open .watch-live-buy > .visibilityHidden{ display:none !important; } #productListRow.mt-pdp-open .mt-open [id^="pc-input-holder-"]:not(.visibilityHidden){ display:flex !important; gap:8px; margin-bottom:10px !important; } #productListRow.mt-pdp-open .mt-open [id^="pc-input-holder-"] .col-md-9{ flex:1 1 auto; width:auto; float:none; } #productListRow.mt-pdp-open .mt-open [id^="pc-input-holder-"] .col-md-3{ flex:0 0 auto; width:auto; float:none; } #productListRow.mt-pdp-open .mt-open [id^="pc-input-holder-"] .form-control{ height:44px; border-radius:0; } #productListRow.mt-pdp-open .mt-open [id^="pc-input-holder-"] .notify-go{ height:44px; line-height:30px; width:50px; border-radius:0; border:0; background:#8e3560 !important; } #productListRow.mt-pdp-open .mt-open [id^="pc-notify-button-"]{ display:block; width:100% !important; height:44px; line-height:30px; border:0 !important; border-radius:0 !important; background:#8e3560 !important; color:#fff !important; font-size:13px; font-weight:700; letter-spacing:2px; } .mt-pdp-soldout{ display:inline-block; margin-top:10px; padding:6px 14px; border:2px solid #c0305a; color:#c0305a; font-size:12px; font-weight:700; letter-spacing:2px; } #productListRow.mt-pdp-open .mt-open .watch-live-buy{ display:flex !important; align-items:center; gap:12px; margin:18px 0 6px !important; } #productListRow.mt-pdp-open .mt-open .watch-live-price{ flex:1 1 auto; width:auto !important; float:none !important; text-align:left !important; margin:0 !important; font-size:18px !important; } #productListRow.mt-pdp-open .mt-open .watch-live-price br{ display:none; } #productListRow.mt-pdp-open .mt-open .watch-live-price strike{ font-size:13px; font-weight:400; color:#6d5d65; margin-right:8px; } #productListRow.mt-pdp-open .mt-open .watch-live-buy-button{ flex:0 0 55%; width:auto !important; float:none !important; margin:0 !important; } #productListRow.mt-pdp-open .mt-open .watch-live-buy-button .buy-button{ height:44px; line-height:44px; padding:0 !important; border:0 !important; border-radius:0 !important; background:#8e3560 !important; color:#fff !important; font-size:13px; font-weight:700; letter-spacing:2px; } #productListRow.mt-pdp-open .mt-open .watch-live-pdp > .cp{ position:relative; text-align:left !important; margin:0 !important; padding:13px 0; border-top:1px solid #eee3e8; font-size:12px; letter-spacing:1.5px; color:#231d20; } #productListRow.mt-pdp-open .mt-open .watch-live-pdp > .cp .fa{ position:absolute; right:0; left:auto !important; top:10px !important; margin:0 !important; font-size:20px; } #productListRow.mt-pdp-open .mt-open [id^="watchLiveDesc-"], #productListRow.mt-pdp-open .mt-open [id^="watchLiveMoreImages-"]{ text-align:left !important; font-size:13px; line-height:1.5; padding-bottom:12px; } /* ---- show collection QR panel ---- */ html.mt-desktop #showCollectionQrHolder{ position:fixed !important; right:0 !important; bottom:48px !important; width:var(--mt-products-w); box-sizing:border-box; background:#fff; border-top:4px solid #8e3560; box-shadow:0 -8px 30px rgba(35,29,32,.25); padding:20px 28px 22px; text-align:center; font-family:'Montserrat', 'Helvetica Neue', sans-serif; color:#231d20; } .mt-coll-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .mt-coll-title{ font-size:15px; font-weight:700; letter-spacing:2px; text-align:left; } .mt-coll-sub{ font-size:12px; color:#6d5d65; text-align:left; margin-top:2px; } .mt-coll-close{ width:36px; height:36px; border:0; border-radius:18px; background:#f2e6ec; color:#8e3560; font-size:16px; cursor:pointer; } .mt-coll-close:hover{ background:#8e3560; color:#fff; } html.mt-desktop #qrCodeShopTheShow img, html.mt-desktop #qrCodeShopTheShow canvas{ width:200px; height:200px; margin:0 auto; padding:10px; border:1px solid #eadde3; background:#fff; } html.mt-desktop #showCollectionQrHolder .col-md-12{ float:none; width:auto; padding:14px 0 0 !important; background:none !important; font-size:12px; line-height:1.5; color:#6d5d65; } html.mt-desktop #showCollectionQrHolder .col-md-12 br{ display:none; } html.mt-desktop #showCollectionQrHolder .col-md-12 > strong:first-child{ display:block; font-size:12px; letter-spacing:1.5px; color:#8e3560; margin-bottom:6px; } html.mt-desktop #showCollectionQrHolder .col-md-12 > strong:nth-of-type(2){ display:block; color:#231d20; } html.mt-desktop #showCollectionQrHolder .col-md-12 p{ display:inline-block; margin:10px 0 0 !important; padding:8px 18px; background:#fbf3f7; border:1px dashed #CB889A; font-size:26px !important; letter-spacing:4px; color:#8e3560 !important; } html.mt-desktop #showCollectionQrButton.mt-coll-open{ background:#8e3560 !important; color:#fff !important; } /* ---- floating heading: SHOP THE SHOW + quick links + show collection, and BACK ---- It sticks to the top of the product column while you scroll */ html.mt-desktop .mt-sticky{ position:sticky; top:0; z-index:20; background:#fff; box-shadow:0 4px 12px rgba(35,29,32,.08); } html.mt-desktop .mt-sticky .mt-col-head{ flex-wrap:wrap; } .mt-head-btns{ display:flex; gap:8px; flex:0 0 100%; } .mt-head-btns > *{ flex:1 1 0; } html.mt-desktop .mt-head-btns #showQuickLinksMyTelly, html.mt-desktop .mt-head-btns #showCollectionQrButton{ position:static !important; display:block !important; width:auto !important; height:36px; margin:0 !important; padding:0 8px !important; line-height:34px; border-radius:0 !important; font-size:11px; font-weight:700; letter-spacing:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:none !important; } html.mt-desktop .mt-head-btns #showCollectionQrButton{ background:#fff !important; color:#8e3560 !important; border:2px solid #8e3560 !important; } html.mt-desktop .mt-head-btns #showCollectionQrButton:hover{ background:#f2e6ec !important; } html.mt-desktop .mt-head-btns #showCollectionQrButton.mt-coll-open{ background:#8e3560 !important; color:#fff !important; } html.mt-desktop .mt-sticky #closePdp{ float:none !important; background:#fbf3f7; border-bottom:0; border-top:1px solid #eee3e8; } html.mt-desktop .mt-sticky #closePdp:hover{ background:#f2e6ec; } /* collection panel drops down from under the heading */ html.mt-desktop .mt-sticky #showCollectionQrHolder{ position:absolute !important; top:100% !important; left:0 !important; right:0 !important; bottom:auto !important; width:auto; max-height:calc(var(--mt-height) - 120px); overflow-y:auto; border-top:0; border-bottom:4px solid #8e3560; box-shadow:0 12px 30px rgba(35,29,32,.25); } /* SEND BASKET TO PHONE: a tidy full-width bar in the heading, instead of floating loose over the page. It only appears when there is something in the basket. */ html.mt-desktop .mt-col-head #sendBasketToPhoneMyTelly{ position:static !important; top:auto !important; right:auto !important; left:auto !important; flex:0 0 100%; width:100% !important; height:32px; line-height:30px; margin:0 !important; padding:0 10px !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; text-align:center; font-size:11px; font-weight:700; letter-spacing:1.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } html.mt-phone .mt-col-head #sendBasketToPhoneMyTelly{ height:26px; line-height:24px; font-size:9px; } html.mt-portrait .mt-col-head #sendBasketToPhoneMyTelly{ height:32px; line-height:30px; font-size:11px; } /* quick links panel: drops down under the heading, like the collection panel */ html.mt-desktop .mt-sticky #quick-links-wrapper.mt-ql-panel{ position:absolute !important; top:100% !important; left:0 !important; right:0 !important; z-index:2; background:#fff; border-bottom:4px solid #8e3560; box-shadow:0 12px 30px rgba(35,29,32,.25); padding:14px 20px 16px; box-sizing:border-box; max-height:calc(var(--mt-height) - 100px); overflow-y:auto; } html.mt-desktop .mt-sticky #quick-links-wrapper.mt-ql-panel{ display:none !important; } html.mt-desktop .mt-sticky #quick-links-wrapper.mt-ql-panel.mt-ql-open{ display:grid !important; grid-template-columns:1fr 1fr; gap:8px; } html.mt-desktop .mt-sticky #quick-links-wrapper.mt-ql-panel .quick-links-link{ position:static !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; width:auto !important; margin:0 !important; float:none !important; height:38px; line-height:38px; padding:0 10px !important; border-radius:0 !important; font-size:11px !important; font-weight:700; letter-spacing:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; box-shadow:none !important; } html.mt-desktop .mt-sticky #quick-links-wrapper.mt-ql-panel .quick-links-link{ display:block !important; } html.mt-desktop .mt-sticky #quick-links-wrapper.mt-ql-panel .quick-links-link.hide{ display:none !important; } html.mt-desktop .mt-sticky #quick-links-wrapper.mt-ql-panel .top-link-up{ display:none !important; } /* HOME takes the whole last row now BACK TO NORMAL VIEW has gone */ html.mt-desktop .mt-sticky #quick-links-wrapper.mt-ql-panel .top-link-home{ grid-column:1 / -1; } html.mt-desktop .mt-sticky #quick-links-wrapper.mt-ql-panel .top-link-normal-view{ display:none !important; } /* show collection is hidden by the site on small screens - allow it in our heading */ html.mt-desktop .mt-sticky #showCollectionQrHolder:not([style*="display: none"]):not([style*="display:none"]){ display:block !important; } html.mt-phone .mt-sticky #quick-links-wrapper.mt-ql-panel{ padding:8px 10px 10px; } html.mt-phone .mt-hide-phone{ display:none; } html.mt-phone .mt-sticky #quick-links-wrapper.mt-ql-panel .quick-links-link{ height:30px; line-height:30px; font-size:9px !important; padding:0 6px !important; } html.mt-phone .mt-sticky #quick-links-wrapper.mt-ql-panel.mt-ql-open{ gap:6px; } /* phone: compact collection panel - QR on the left, code on the right */ html.mt-phone .mt-sticky #showCollectionQrHolder{ padding:10px 12px 12px !important; text-align:left; } html.mt-phone .mt-sticky #showCollectionQrHolder .mt-coll-head{ margin-bottom:8px; } html.mt-phone .mt-sticky #showCollectionQrHolder .mt-coll-title{ font-size:12px; } html.mt-phone .mt-sticky #showCollectionQrHolder .mt-coll-sub{ display:none; } html.mt-phone .mt-sticky #showCollectionQrHolder .mt-coll-close{ width:28px; height:28px; font-size:13px; } html.mt-phone #qrCodeShopTheShow{ float:left; margin-right:12px; } html.mt-phone #qrCodeShopTheShow img, html.mt-phone #qrCodeShopTheShow canvas{ width:110px !important; height:110px !important; padding:4px !important; } html.mt-phone #showCollectionQrHolder .col-md-12{ padding:0 !important; font-size:10px !important; text-align:left !important; overflow:hidden; } html.mt-phone #showCollectionQrHolder .col-md-12 p{ font-size:18px !important; margin-top:6px !important; padding:4px 10px !important; } /* ---- big video (our own full screen, for phones and browsers that refuse real full screen) ---- */ html.mt-big, html.mt-big body{ overflow:hidden !important; } html.mt-big .mt-stage{ position:fixed !important; left:0; top:0; right:0; bottom:0; z-index:99999; width:100vw; height:100vh; display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:0; padding:0; background:#000 !important; } html.mt-big #video{ width:min(100vw, calc((100vh - 60px) * 16 / 9)) !important; height:auto !important; aspect-ratio:16 / 9 !important; } html.mt-big .mt-timeline{ width:min(100vw, calc((100vh - 60px) * 16 / 9)) !important; padding:6px 10px 8px; box-sizing:border-box; } html.mt-big #welcome-message-holder, html.mt-big #productsContainer, html.mt-big .mt-rotate{ display:none !important; } /* ---- phone held upright: video on top, products down the page ---- */ html.mt-portrait{ overflow-x:hidden !important; overflow-y:auto !important; height:auto !important; background:#1b1519 !important; } /* body must not scroll by itself here, or nothing on the page can stay stuck to the top */ html.mt-portrait body{ overflow:visible !important; height:auto !important; background:#1b1519 !important; } html.mt-portrait #videoAndProductsContainer{ display:block !important; height:auto !important; } html.mt-portrait .mt-stage{ position:sticky; top:0; z-index:25; width:100%; gap:0; padding:0; } html.mt-portrait #video{ width:100% !important; height:var(--mt-video-h) !important; } html.mt-portrait .mt-timeline{ width:100% !important; padding:8px 10px 10px; box-sizing:border-box; } html.mt-portrait #productsContainer{ flex:none !important; width:100% !important; height:auto !important; overflow:visible !important; border-left:0; } html.mt-portrait #productsContainer > .container.visible-md{ display:block !important; } /* SHOP THE SHOW sticks just under the video, the same as the sideways version */ html.mt-portrait .mt-sticky{ top:var(--mt-stage-h, 0px); } html.mt-portrait .mt-sticky #showCollectionQrHolder{ max-height:calc(100vh - var(--mt-stage-h, 0px) - 100px); } html.mt-portrait .mt-col-head{ padding:10px 12px; flex-wrap:wrap; } html.mt-portrait .mt-col-head > div:first-child{ flex:1 1 100%; } html.mt-portrait #clock{ display:none !important; } html.mt-portrait #welcome-message-holder .welcome-message{ text-align:center !important; padding:8px 12px !important; font-size:12px !important; } html.mt-portrait .mt-brand{ position:static !important; display:block; transform:none; text-align:center; margin-bottom:2px; font-size:12px; letter-spacing:2px; } html.mt-portrait .mt-head-btns{ flex:0 0 100%; } html.mt-portrait .mt-head-btns #showCollectionQrButton{ display:block !important; } html.mt-portrait .mt-col-title{ font-size:13px; } html.mt-portrait .mt-col-sub{ display:block; font-size:11px; } html.mt-portrait .mt-card{ padding:12px; gap:12px; } html.mt-portrait .mt-img{ flex-basis:88px; width:88px; height:88px; } html.mt-portrait .mt-info{ min-height:88px; } html.mt-portrait .mt-title{ font-size:12px; -webkit-line-clamp:4; } html.mt-portrait .mt-now-price{ font-size:15px; } html.mt-portrait .mt-jump, html.mt-portrait .mt-buy{ height:34px; font-size:11px; } html.mt-portrait .mt-head-btns #showQuickLinksMyTelly, html.mt-portrait .mt-head-btns #showCollectionQrButton{ height:34px; line-height:32px; font-size:11px; } html.mt-portrait #productListRow > .product-item.mt-now .mt-img{ flex-basis:120px; width:120px; height:120px; } html.mt-portrait #productListRow > .product-item.mt-now .mt-bigbuy{ height:44px; font-size:13px; } html.mt-portrait #productListRow.mt-pdp-open .mt-open .mt-pdp-qr{ display:none !important; } html.mt-portrait #productListRow.mt-pdp-open .mt-open .pc-product-img-holder{ flex-basis:100% !important; width:100% !important; } html.mt-portrait #productListRow.mt-pdp-open .mt-open .watch-live-img-title{ flex-wrap:wrap; } html.mt-portrait .mt-hide-phone{ display:inline; } html.mt-portrait #qrCodeShopTheShow, html.mt-portrait #qrCodeShopTheShow img, html.mt-portrait #qrCodeShopTheShow canvas{ float:none; width:150px !important; height:150px !important; margin:0 auto; } html.mt-portrait #showCollectionQrHolder .col-md-12{ text-align:center !important; font-size:11px !important; } html.mt-portrait .mt-rotate{ display:none !important; } /* phone upright: no QUICK LINKS button (or its panel) - COLLECTION takes the whole row */ html.mt-portrait #showQuickLinksMyTelly, html.mt-portrait #quick-links-wrapper, html.mt-portrait .top-scroll-buttons [id*="QuickLinks"], html.mt-portrait .top-scroll-buttons [class*="quick-links"]{ display:none !important; } /* phone upright: a round TOP arrow in place of the quick links floater - back to the video */ .mt-top-btn{ display:none; } html.mt-portrait .mt-top-btn{ display:block; position:fixed; right:14px; bottom:6px; z-index:40; width:52px; height:52px; padding:0; margin:0; border:0; border-radius:26px; background:#8e3560; color:#fff; text-align:center; cursor:pointer; -webkit-appearance:none; appearance:none; box-shadow:0 4px 14px rgba(0,0,0,.35); font-family:'Montserrat', 'Helvetica Neue', sans-serif; -webkit-tap-highlight-color:transparent; opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s; } html.mt-portrait .mt-top-btn.mt-show{ opacity:1; visibility:visible; } html.mt-portrait .mt-top-btn:active{ background:#6e2749; } .mt-top-btn .fa{ display:block; font-size:18px; line-height:18px; margin-top:8px; } .mt-top-btn span{ display:block; font-size:10px; font-weight:700; letter-spacing:1.5px; line-height:12px; margin-top:2px; } html.mt-portrait #bottomText{ display:none !important; } /* ---- phone turned sideways (landscape): same layout, compact ---- */ /* the product list is normally hidden below 992px wide (visible-md/lg) - show it on a sideways phone */ html.mt-phone #productsContainer > .container.visible-md{ display:block !important; } html.mt-phone, html.mt-phone body{ overflow-x:hidden; } html.mt-phone #welcome-message-holder > .row{ margin-left:0; margin-right:0; } html.mt-phone #productListRow > .product-item{ float:left; width:100%; } /* phones: title and message centred in the banner */ html.mt-phone #welcome-message-holder .welcome-message{ padding:5px 12px !important; text-align:center !important; font-size:11px !important; line-height:1.35; } html.mt-phone .mt-brand{ position:static !important; transform:none !important; display:block; text-align:center; font-size:11px; letter-spacing:2px; } html.mt-phone #clock{ display:none !important; } html.mt-phone .mt-stage{ gap:8px; } html.mt-phone .mt-timeline{ gap:4px; } html.mt-phone .mt-timeline-head{ font-size:11px; letter-spacing:.5px; } /* FIX 39: was 10px */ html.mt-phone .mt-col-head{ padding:8px 10px; gap:6px; } html.mt-phone .mt-col-title{ font-size:12px; letter-spacing:1.5px; } html.mt-phone .mt-col-sub{ display:none; } html.mt-phone .mt-head-btns #showQuickLinksMyTelly, html.mt-phone .mt-head-btns #showCollectionQrButton{ height:30px; line-height:28px; font-size:10px; } html.mt-phone .mt-sticky #closePdp{ padding:9px 12px; } html.mt-phone .mt-card{ gap:10px; padding:10px; } html.mt-phone .mt-img{ flex-basis:64px; width:64px; height:64px; } html.mt-phone .mt-info{ min-height:64px; gap:5px; } html.mt-phone .mt-title{ font-size:11px; -webkit-line-clamp:3; } html.mt-phone .mt-now-price{ font-size:13px; } html.mt-phone .mt-actions{ flex-wrap:wrap; gap:5px; } html.mt-phone .mt-jump, html.mt-phone .mt-buy{ height:28px; font-size:10px; padding:0 8px; } html.mt-phone .mt-card-top{ padding:10px 10px 0; } html.mt-phone .mt-section-label{ padding:10px 10px 4px; font-size:10px; } html.mt-phone #productListRow > .product-item.mt-now .mt-img{ flex-basis:90px; width:90px; height:90px; } html.mt-phone #productListRow > .product-item.mt-now .mt-card{ padding-top:8px; padding-bottom:12px; } html.mt-phone #productListRow > .product-item.mt-now .mt-title{ font-size:12px; } html.mt-phone #productListRow > .product-item.mt-now .mt-now-price{ font-size:15px; } html.mt-phone #productListRow > .product-item.mt-now .mt-bigbuy{ height:38px; font-size:12px; } html.mt-phone #productListRow.mt-pdp-open > .product-item.mt-open{ padding:10px 12px 16px !important; } html.mt-phone #productListRow.mt-pdp-open .mt-open .mt-pdp-qr > :not(.mt-pdp-soldout){ display:none !important; } html.mt-phone #productListRow.mt-pdp-open .mt-open .pc-product-img-holder{ flex-basis:60%; width:60% !important; } html.mt-phone #productListRow.mt-pdp-open .mt-open .watch-live-buy-button .buy-button{ height:38px; line-height:38px; } /* phone held upright: nudge to turn it */ .mt-rotate{ display:none; } @media (max-width:767px) and (orientation:portrait){ .mt-rotate{ display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 12px; background:#8e3560; color:#fff; font-family:'Montserrat', 'Helvetica Neue', sans-serif; font-size:12px; font-weight:700; letter-spacing:1px; } } /* timeline under the video */ .mt-timeline{ box-sizing:border-box; display:flex; flex-direction:column; gap:10px; } .mt-timeline-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; color:#cdbac3; font-size:12px; font-weight:600; letter-spacing:1px; } .mt-tl-left, .mt-tl-right{ display:flex; align-items:center; gap:10px; } /* our own video buttons (YouTube's controls are hidden) */ .mt-ctrl{ width:34px; height:34px; padding:0; border:0; border-radius:17px; background:#CB889A; color:#fff; font-size:13px; line-height:34px; text-align:center; cursor:pointer; flex:0 0 auto; } .mt-ctrl:hover, .mt-ctrl:focus{ background:#fff; color:#8e3560; outline:none; } .mt-ctrl.mt-ctrl-play{ width:40px; height:40px; border-radius:20px; font-size:15px; line-height:40px; } .mt-ctrl.mt-ctrl-plain{ background:transparent; color:#cdbac3; } .mt-ctrl.mt-ctrl-plain:hover, .mt-ctrl.mt-ctrl-plain:focus{ background:#3b3137; color:#fff; } html.mt-phone .mt-ctrl{ width:28px; height:28px; line-height:28px; font-size:11px; } /* FIX 39: a bigger area to tap on phones - the buttons look the same */ html.mt-phone .mt-ctrl{ position:relative; } html.mt-phone .mt-ctrl::after{ content:""; position:absolute; left:-6px; right:-6px; top:-8px; bottom:-8px; } html.mt-phone .mt-ctrl.mt-ctrl-play{ width:30px; height:30px; line-height:30px; } /* cover over the video: stops YouTube's own title, logo, "More videos" and timeline showing */ #video.mt-has-shield{ position:relative; } .mt-shield{ position:absolute; left:0; top:0; right:0; bottom:0; z-index:5; cursor:pointer; background:transparent; } .mt-shield .mt-cover{ display:none; position:absolute; left:0; top:0; right:0; bottom:0; background:#1b1519 center / cover no-repeat; } .mt-shield .mt-cover::after{ content:''; position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(27,21,25,.3); } .mt-shield .mt-bigplay{ display:none; position:absolute; left:50%; top:50%; z-index:1; width:84px; height:84px; margin:-42px 0 0 -42px; border-radius:42px; background:#8e3560; color:#fff; font-size:32px; line-height:84px; text-align:center; box-shadow:0 6px 24px rgba(0,0,0,.35); padding-left:6px; box-sizing:border-box; } .mt-shield .mt-paused-at{ display:none; position:absolute; left:0; right:0; top:50%; z-index:1; margin-top:54px; text-align:center; color:#fff; font-size:13px; font-weight:700; letter-spacing:2px; } .mt-shield.mt-stopped .mt-cover, .mt-shield.mt-stopped .mt-bigplay, .mt-shield.mt-stopped .mt-paused-at{ display:block; } .mt-shield.mt-stopped:hover .mt-bigplay{ background:#6e2749; } .mt-shield.mt-ended{ display:none; } /* TVs: pausing just freezes the picture on that frame (like YouTube) - no cover picture or big button, which are slow to draw on a TV. The play/pause button under the video shows it's paused. */ html.mt-tv .mt-shield.mt-paused .mt-cover, html.mt-tv .mt-shield.mt-paused .mt-bigplay, html.mt-tv .mt-shield.mt-paused .mt-paused-at{ display:none !important; } .mt-shield .mt-unmute{ display:none; position:absolute; left:16px; top:16px; z-index:1; padding:10px 16px; border-radius:22px; background:#8e3560; color:#fff; font-size:13px; font-weight:700; letter-spacing:1.5px; box-shadow:0 4px 16px rgba(0,0,0,.35); } .mt-shield .mt-unmute .fa{ margin-right:6px; } .mt-shield.mt-muted .mt-unmute{ display:block; animation:mtPulse 1.6s infinite; } html.mt-phone .mt-shield .mt-unmute{ left:8px; top:8px; padding:6px 10px; font-size:10px; } html.mt-phone .mt-shield .mt-bigplay{ width:56px; height:56px; margin:-28px 0 0 -28px; line-height:56px; font-size:22px; } html.mt-phone .mt-shield .mt-paused-at{ margin-top:36px; font-size:11px; } /* full screen: video and the product timeline together */ .mt-stage:fullscreen{ background:#1b1519; justify-content:center; gap:14px; padding:20px 40px; box-sizing:border-box; } .mt-stage:fullscreen #video{ width:min(100%, calc((100vh - 120px) * 16 / 9)) !important; height:auto !important; aspect-ratio:16 / 9 !important; } .mt-stage:fullscreen .mt-timeline{ width:min(100%, calc((100vh - 120px) * 16 / 9)) !important; } .mt-track{ position:relative; height:6px; background:#3b3137; border-radius:3px; } .mt-progress{ position:absolute; left:0; top:0; height:6px; width:0; background:#CB889A; border-radius:3px; } .mt-marker{ position:absolute; top:-7px; width:20px; height:20px; margin-left:-10px; padding:0; border-radius:10px; border:3px solid #1b1519; background:#CB889A; cursor:pointer; } .mt-marker.mt-marker-now, .mt-marker:hover, .mt-marker:focus{ background:#fff; } /* ---- 1080p, chosen for the viewer, with nothing for them to press ---- YouTube will not let a page set the picture quality (setPlaybackQuality has done nothing since 2019) and the iframe belongs to youtube.com, so our JavaScript cannot reach inside it to work the cog either - that is the browser's same-origin wall, not a setting. What YouTube DOES respond to is how big the player is, measured inside the iframe's own window. So the iframe is built at the size a 1080p player would be and then scaled down with a CSS transform to fit the space the page has for it. YouTube sees a 1080p-sized player and sends the 1080p stream; the viewer sees the video at exactly the size it was before. The scale is worked out in mtScaleVideoFrame() - see the script below. */ #video{ position:relative; } html.mt-ytscale #homepage_youtube{ position:absolute; left:0; top:0; border:0; width:var(--mt-yt-w); height:var(--mt-yt-h); transform:scale(var(--mt-yt-scale)); transform-origin:0 0; } /* the quality read-out in the bar under the video: it reports what YouTube is actually sending, and is not a button - there is nothing for the viewer to decide any more */ .mt-hd-btn{ display:inline-flex; align-items:center; flex:0 0 auto; height:26px; padding:0 10px; box-sizing:border-box; border:2px solid #6d5d65; border-radius:13px; background:transparent; color:#cdbac3; font-size:10px; font-weight:700; letter-spacing:1px; cursor:default; pointer-events:none; white-space:nowrap; } .mt-hd-btn.mt-hd-on{ border-color:#CB889A; color:#fff; background:#8e3560; } html.mt-phone .mt-hd-btn{ height:22px; padding:0 7px; font-size:9px; } /* SUBTITLES button - off when the page opens, press to turn them on (and off again) */ .mt-cc-btn{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; height:26px; padding:0 9px; box-sizing:border-box; border:2px solid #6d5d65; border-radius:13px; background:transparent; color:#cdbac3; cursor:pointer; font-size:10px; font-weight:700; letter-spacing:1px; white-space:nowrap; font-family:inherit; line-height:1; } .mt-cc-btn:hover{ border-color:#CB889A; color:#fff; } .mt-cc-btn.mt-cc-on{ border-color:#CB889A; color:#fff; background:#8e3560; } html.mt-phone .mt-cc-btn{ height:22px; padding:0 7px; font-size:9px; } .mt-cc-wrap{ position:relative; display:inline-flex; flex:0 0 auto; } .mt-cc-menu{ position:absolute; bottom:calc(100% + 8px); right:0; z-index:50; min-width:130px; padding:6px 0; background:#231d20; border:2px solid #8e3560; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.4); display:none; } .mt-cc-wrap.mt-cc-open .mt-cc-menu{ display:block; } .mt-cc-menu button{ display:block; width:100%; padding:7px 14px; border:0; background:transparent; color:#e8dde2; text-align:left; font-family:inherit; font-size:12px; font-weight:700; letter-spacing:1px; cursor:pointer; white-space:nowrap; } .mt-cc-menu button:hover, .mt-cc-menu button:focus{ background:#3a2f34; color:#fff; outline:none; } .mt-cc-menu button.mt-cc-picked{ color:#fff; background:#8e3560; } .mt-cc-menu .mt-cc-title{ padding:4px 14px 6px; color:#9d8a93; font-size:10px; letter-spacing:1.5px; } /* ================= TV browsers ================= Aimed at the sets people actually use: LG (webOS / NetCast), Samsung (Tizen), Android TV and Google TV, Amazon Fire TV, Sony BRAVIA, Hisense VIDAA, Philips, Panasonic, Sharp, Toshiba, Vestel-built sets, Chromecast and the Vewd/Opera TV browser. Two things matter on a TV: their browsers are older Chromium (so flex "gap" is missing on many of them), and the chips are slow at shadows and animation. So we swap gap for margins, turn the effects off, and give the remote something clear to land on. */ /* flex gap fallback (html.mt-nogap is set by the script below when gap is unsupported) */ html.mt-nogap .mt-card > .mt-img{ margin-right:16px; } html.mt-nogap .mt-info > *{ margin-bottom:8px; } html.mt-nogap .mt-info > *:last-child{ margin-bottom:0; } html.mt-nogap .mt-actions > *{ margin-right:8px; } html.mt-nogap .mt-actions > *:last-child{ margin-right:0; } html.mt-nogap .mt-price > *{ margin-right:6px; } html.mt-nogap .mt-stage > #video{ margin-bottom:18px; } html.mt-nogap .mt-timeline-head{ margin-bottom:10px; } html.mt-nogap .mt-tl-left > *, html.mt-nogap .mt-tl-right > *{ margin-right:10px; } html.mt-nogap .mt-tl-left > *:last-child, html.mt-nogap .mt-tl-right > *:last-child{ margin-right:0; } html.mt-nogap .mt-head-btns > *{ margin-right:8px; } html.mt-nogap .mt-head-btns > *:last-child{ margin-right:0; } html.mt-nogap .mt-col-head > div:first-child{ margin-right:10px; } html.mt-nogap .mt-coll-head > div{ margin-right:10px; } html.mt-nogap #productListRow.mt-pdp-open .mt-open .pc-product-img-holder{ margin-right:16px !important; } html.mt-nogap #productListRow.mt-pdp-open .mt-open .watch-live-price{ margin-right:12px !important; } html.mt-nogap #productListRow:not(.mt-pdp-open) .mt-card .plpStockStatus > div{ margin-bottom:4px !important; } html.mt-nogap .mt-sticky #quick-links-wrapper.mt-ql-panel.mt-ql-open{ display:block !important; } html.mt-nogap .mt-sticky #quick-links-wrapper.mt-ql-panel .quick-links-link{ margin-bottom:8px !important; } /* big video / full screen without min() or aspect-ratio, which older TV browsers don't know */ html.mt-big #video{ width:calc((100vh - 60px) * 16 / 9) !important; max-width:100vw !important; height:calc(100vh - 60px) !important; max-height:calc(100vw * 9 / 16) !important; aspect-ratio:auto !important; } html.mt-big .mt-timeline{ width:calc((100vh - 60px) * 16 / 9) !important; max-width:100vw !important; } .mt-stage:fullscreen #video{ width:calc((100vh - 120px) * 16 / 9) !important; max-width:100% !important; height:calc(100vh - 120px) !important; max-height:calc(100vw * 9 / 16) !important; aspect-ratio:auto !important; } .mt-stage:fullscreen .mt-timeline{ width:calc((100vh - 120px) * 16 / 9) !important; max-width:100% !important; } /* TVs now look the same as the web page: the shadows, the pulsing LIVE / ON AIR dots and the hover time on the timeline are back (all cheap to draw). Only slide/fade transitions stay off. */ html.mt-tv *, html.mt-tv *::before, html.mt-tv *::after{ transition:none !important; } /* (the old "content-visibility" line has gone: on 2022-2023 LG sets it squashed the rows that were off the screen to nothing, so the list jumped about while scrolling) */ /* the remote needs to see where it is - but only when the arrow buttons are being used. Pointing and clicking with the LG Magic Remote looks exactly like the web page. */ html.mt-tv.mt-keys button:focus, html.mt-tv.mt-keys a:focus, html.mt-tv.mt-keys [tabindex]:focus{ outline:3px solid #fff !important; outline-offset:2px; } html.mt-tv.mt-keys #productsContainer button:focus, html.mt-tv.mt-keys #productsContainer a:focus{ outline-color:#8e3560 !important; } html.mt-tv.mt-keys .mt-buy:focus, html.mt-tv.mt-keys .mt-bigbuy:focus, html.mt-tv.mt-keys .mt-jump:focus{ background:#8e3560 !important; color:#fff !important; } html.mt-tv.mt-keys .mt-title:focus{ text-decoration:underline; } html.mt-tv.mt-keys .mt-img:focus{ outline-offset:0; } html.mt-tv button:focus, html.mt-tv a:focus{ outline:0; } /* TV "bigger picture": the same look as full screen on a computer (dark surround, video and timeline together). TVs use this instead of the browser's full screen, which LG sets handle unreliably with a YouTube video inside. */ html.mt-tv.mt-big .mt-stage{ background:#1b1519 !important; padding:20px 40px !important; box-sizing:border-box; } html.mt-tv.mt-big .mt-stage > #video{ width:calc((100vh - 120px) * 16 / 9) !important; max-width:100% !important; height:calc(100vh - 120px) !important; max-height:calc((100vw - 80px) * 9 / 16) !important; margin-bottom:14px; } html.mt-tv.mt-big .mt-stage > .mt-timeline{ width:calc((100vh - 120px) * 16 / 9) !important; max-width:100% !important; } /* ---- FIX 66: phone on its side, big video - the picture fills the whole screen; the controls float over its bottom edge and tuck away 3.5 seconds after the last touch (a tap brings them back) ---- */ @media (max-height:540px) and (orientation:landscape){ html.mt-big:not(.mt-tv) .mt-stage{ justify-content:center !important; } html.mt-big:not(.mt-tv) #video{ width:calc(100vh * 16 / 9) !important; height:100vh !important; max-width:100vw !important; max-height:calc(100vw * 9 / 16) !important; aspect-ratio:auto !important; } html.mt-big:not(.mt-tv) .mt-timeline{ position:fixed !important; left:0; right:0; bottom:0; width:auto !important; max-width:none !important; margin:0 auto; z-index:100001; padding:22px max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important; background:linear-gradient(to top, rgba(0,0,0,.85) 40%, rgba(0,0,0,0)) !important; transition:opacity .3s ease; } html.mt-big.mt-ctl-hide:not(.mt-tv) .mt-timeline{ opacity:0; pointer-events:none; } } /* older Chromium full screen (the ":fullscreen" rules above are dropped by browsers that only know the -webkit- name, so they are repeated here on their own) */ .mt-stage:-webkit-full-screen{ background:#1b1519; justify-content:center; padding:20px 40px; box-sizing:border-box; width:100%; height:100%; } .mt-stage:-webkit-full-screen #video{ width:calc((100vh - 120px) * 16 / 9) !important; max-width:100% !important; height:calc(100vh - 120px) !important; max-height:calc(100vw * 9 / 16) !important; aspect-ratio:auto !important; margin-bottom:14px; } .mt-stage:-webkit-full-screen .mt-timeline{ width:calc((100vh - 120px) * 16 / 9) !important; max-width:100% !important; } /* our own buttons: no native TV button styling, so they look the same as on the web */ .mt-img, .mt-title, .mt-jump, .mt-buy, .mt-bigbuy, .mt-ctrl, .mt-marker, .mt-coll-close{ -webkit-appearance:none; -moz-appearance:none; appearance:none; } .mt-img{ display:block; } .mt-title{ display:block !important; width:100%; } /* the product name is cut to 4 lines inside a span, because older TV browsers won't cut the text of a