/*
Theme Name:   Miami Peptide Lab Child
Theme URI:    https://miamipeptidelab.com
Description:  Child theme of Divi for Miami Peptide Lab. Brand design system: black / white / Miami cyan, Inter, flat, Apple-grade minimalism.
Author:       ThinkBullish
Template:     Divi
Version:      0.4.3
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --mpl-black:#0A0A0A;
  --mpl-bg-dark:#0B0B0C;
  --mpl-white:#FFFFFF;
  --mpl-cyan:#00EFFF;
  --mpl-cyan-ink:#06181A;
  --mpl-gray:#EEF1F4;
  --mpl-border:#ECECEC;
  --mpl-muted:#8A8A8A;
}

/* ---------- Typography ---------- */
body, .et_pb_text, p, .woocommerce, input, select, textarea, button, #top-menu li a{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}
body{ color:var(--mpl-black); background:var(--mpl-white); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,h6,.et_pb_module_header{ font-family:'Inter',sans-serif; color:var(--mpl-black); font-weight:600; letter-spacing:-.01em; }
a{ transition:color .2s ease; }

/* ---------- Full-width content (kill the empty right-sidebar offset) ---------- */
.et_right_sidebar #left-area, .et_left_sidebar #left-area, #main-content #left-area{ width:100% !important; padding:0 !important; float:none !important; }
#sidebar{ display:none !important; }
.et_right_sidebar #main-content .container:before, .et_left_sidebar #main-content .container:before{ display:none !important; border:none !important; }
.et_right_sidebar #main-content .container:after, .et_left_sidebar #main-content .container:after{ content:""; display:table; clear:both; }

/* ---------- Header ---------- */
#main-header, #main-header.et-fixed-header, .et-fixed-header#main-header{
  background-color:var(--mpl-black) !important;
  box-shadow:none !important;
  border-bottom:1px solid #1c1c1c;
}
#logo{
  content:url('assets/logo-white.svg');
  height:30px !important; width:auto !important; max-width:230px; max-height:30px;
}
.et-fixed-header #logo{ height:28px !important; }
#top-menu li a, #et-top-navigation .menu li a{
  color:#E8E8E8 !important; text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:500;
}
#top-menu li a:hover, #top-menu li.current-menu-item > a{ color:var(--mpl-cyan) !important; }
#et_top_search .et-search-icon:before, .et-cart-info span, .et-cart-info span:before, #et_top_search .et-search-icon{ color:#E8E8E8 !important; }

/* ---------- Mobile header ----------
   Divi's stock mobile header floats the cart, search icon and hamburger
   in a jumbled order, leaving the cart stranded in the middle with an
   empty gap before the hamburger. Lay the cluster out as a right-aligned
   flex row so the cart sits right next to the hamburger at the far edge,
   and align all three on the logo's line. Scoped to Divi's mobile-menu
   breakpoint (<=980px) so the desktop header is untouched. */
@media(max-width:980px){
  #et-top-navigation{ display:flex !important; align-items:flex-start; justify-content:flex-end; gap:20px !important; }
  #et-top-navigation > *{ float:none !important; margin:0 !important; }
  #et-top-navigation #et_top_search{ order:1; }
  #et-top-navigation .et-cart-info{ order:2; margin-top:5px !important; } /* drop the small cart icon onto the hamburger glyph's line */
  #et-top-navigation #et_mobile_nav_menu{ order:3; }                     /* hamburger pinned to the far right */

  /* Hamburger icon: Divi ships it in its stock blue — make it white to
     match the header's light nav links. */
  #et_mobile_nav_menu .mobile_menu_bar:before{ color:#fff !important; }

  /* Mobile dropdown menu: Divi's default is a white panel with a blue top
     bar and gray, un-styled links — off-brand against the black header.
     Restyle it to match the site: black panel, cyan accent line, and the
     same uppercase letter-spaced links as the desktop nav. */
  #et_mobile_nav_menu .et_mobile_menu,
  #et_mobile_nav_menu .et_mobile_menu ul{
    background:var(--mpl-black) !important;
    border-top:1px solid var(--mpl-cyan) !important;
    box-shadow:0 12px 30px rgba(0,0,0,.45) !important;
    padding:6px 0 !important;
  }
  #et_mobile_nav_menu .et_mobile_menu li{ border:0 !important; background:none !important; }
  #et_mobile_nav_menu .et_mobile_menu li a{
    color:#E8E8E8 !important;
    text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:500;
    padding:15px 24px !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
    transition:color .2s ease, background-color .2s ease;
  }
  #et_mobile_nav_menu .et_mobile_menu li:last-child a{ border-bottom:0 !important; }
  #et_mobile_nav_menu .et_mobile_menu li a:hover,
  #et_mobile_nav_menu .et_mobile_menu li.current-menu-item > a{
    color:var(--mpl-cyan) !important; background:rgba(0,239,255,.06) !important;
  }
  /* nested sub-menu items sit slightly indented, same treatment */
  #et_mobile_nav_menu .et_mobile_menu ul li a{ padding-left:38px !important; }
}

/* ---------- Buttons ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.single_add_to_cart_button, .et_pb_button, a.et_pb_button{
  background-color:var(--mpl-black) !important; color:#fff !important;
  border:none !important; border-radius:8px !important;
  text-transform:uppercase; letter-spacing:.1em; font-weight:600; font-size:12px !important;
  padding:13px 26px !important; box-shadow:none !important;
  transition:background-color .25s ease, color .25s ease !important;
}
.et_pb_button:after, .woocommerce a.button:after, .single_add_to_cart_button:after{ display:none !important; content:"" !important; }
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover,
.single_add_to_cart_button:hover, .et_pb_button:hover, a.et_pb_button:hover{
  background-color:var(--mpl-cyan) !important; color:var(--mpl-cyan-ink) !important;
}

/* ---------- WooCommerce loop / shop ---------- */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
  background:#fff; border:1px solid var(--mpl-border); border-radius:10px; overflow:hidden;
  padding:0 0 18px !important; text-align:left; transition:border-color .2s ease;
  animation:mplfade .35s ease both;
}
.woocommerce ul.products li.product:hover{ border-color:#cfcfcf; }
.woocommerce ul.products li.product .et_shop_image{ display:block; background:var(--mpl-bg-dark); padding:20px; margin:0 !important; overflow:hidden; }
.woocommerce ul.products li.product .et_shop_image img{ margin:0 !important; transition:transform .3s ease; }
.woocommerce ul.products li.product:hover .et_shop_image img{ transform:scale(1.07); }
.woocommerce ul.products li.product .et_overlay{ display:none !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2, .woocommerce ul.products li.product h3{
  text-transform:uppercase; letter-spacing:.04em; font-weight:600; font-size:14px !important;
  padding:14px 16px 2px !important; color:var(--mpl-black);
}
.woocommerce ul.products li.product .price{
  color:var(--mpl-black) !important; font-weight:600; font-size:15px; padding:0 16px; display:block; margin-bottom:12px;
}
.woocommerce ul.products li.product .price del{ color:var(--mpl-muted); font-weight:400; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }
.woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart{ margin:0 16px !important; display:inline-block; }
.woocommerce span.onsale{ background:var(--mpl-cyan) !important; color:var(--mpl-cyan-ink) !important; border-radius:6px; box-shadow:none; min-height:0; line-height:1.6; }

/* ---------- Single product ---------- */
.single-product div.product .product_title{ text-transform:uppercase; letter-spacing:.02em; font-weight:700; }
.single-product div.product p.price, .single-product div.product span.price{ color:var(--mpl-black); font-weight:600; }
.single-product .woocommerce-product-gallery{ background:var(--mpl-bg-dark); border-radius:12px; padding:24px; }
.woocommerce div.product form.cart .variations select{ border-radius:8px; border:1px solid var(--mpl-border); padding:8px 10px; }
.woocommerce .star-rating span:before, .woocommerce p.stars a:before{ color:var(--mpl-cyan); }

/* ---------- Footer ---------- */
#main-footer{ background:var(--mpl-black) !important; }
#footer-widgets .footer-widget h4, #main-footer h1, #main-footer h2, #main-footer h3, #main-footer h4{ color:#fff !important; }
#main-footer, #footer-widgets .footer-widget, #footer-info{ color:#9A9A9E !important; }
#footer-bottom{ background:#060606 !important; }
#main-footer a:hover, #footer-info a, #footer-bottom a{ color:var(--mpl-cyan) !important; }

/* ---------- Homepage (front-page.php) ---------- */
.mpl-hero{ background:var(--mpl-bg-dark); color:#fff; padding:90px 6vw; }
.mpl-wrap{ max-width:1120px; margin:0 auto; }
.mpl-eyebrow{ color:var(--mpl-cyan); text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:600; }
.mpl-hero h1{ color:#fff; font-size:clamp(34px,5vw,58px); line-height:1.08; font-weight:600; letter-spacing:-.015em; margin:18px 0 0; }
.mpl-hero p{ color:#9A9A9E; font-size:17px; max-width:440px; margin:20px 0 32px; }
.mpl-btn{ display:inline-block; background:#fff; color:var(--mpl-black); text-transform:uppercase; letter-spacing:.1em; font-weight:600; font-size:12px; padding:15px 30px; border-radius:8px; transition:background .25s,color .25s; }
.mpl-btn:hover{ background:var(--mpl-cyan); color:var(--mpl-cyan-ink); }
.mpl-link{ color:var(--mpl-cyan) !important; text-transform:uppercase; letter-spacing:.1em; font-weight:600; font-size:12px; margin-left:20px; }
.mpl-section{ padding:72px 6vw; border-top:1px solid var(--mpl-border); }
.mpl-section--light{ background:var(--mpl-gray); }
.mpl-section--dark{ background:var(--mpl-bg-dark); border-top-color:#1c1c1c; }
.mpl-section h2{ text-align:center; font-size:30px; font-weight:600; }
.mpl-section > .mpl-wrap > .mpl-eyebrow{ text-align:center; display:block; }
.mpl-benefits{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; max-width:1000px; margin:0 auto; }
.mpl-benefits svg{ stroke:var(--mpl-cyan); width:30px; height:30px; }
.mpl-benefits .lbl{ text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:600; margin-top:14px; }
.mpl-benefits p{ color:#666; font-size:13px; margin-top:6px; }
@media(max-width:782px){ .mpl-benefits{ grid-template-columns:repeat(2,1fr); } .mpl-hero{ padding:64px 7vw; } }

@keyframes mplfade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

/* ---------- Footer columns ---------- */
#footer-widgets{ padding-bottom:14px; }
#footer-widgets .footer-widget{ color:#9A9A9E; }
.mpl-fcol h4{ color:#fff !important; text-transform:uppercase; letter-spacing:.12em; font-size:13px !important; font-weight:600; margin-bottom:15px; }
.mpl-fcol p{ font-size:13px; line-height:1.75; color:#9A9A9E; margin:0 0 12px; }
.mpl-fcol a{ color:#CFD0D2 !important; }
.mpl-fcol a:hover{ color:var(--mpl-cyan) !important; }
.mpl-fcol ul{ list-style:none; margin:0; padding:0; }
.mpl-fcol li{ margin:0 0 9px; font-size:13px; }
.mpl-fcol .mpl-ruo{ color:#6A6A6E; font-size:11px; line-height:1.6; }
#footer-info{ color:#7A7A7E !important; font-size:12px; letter-spacing:.02em; }

/* ---------- Branded vial placeholder ---------- */
.mpl-vial-img{ display:block; margin:0 auto; max-height:190px; width:auto !important; height:auto !important; }
.single-product .mpl-vial-img{ max-height:340px; }

/* ---------- Shop category filter bar ---------- */
.mpl-catnav{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 30px; }
.mpl-catnav a{ display:inline-block; padding:8px 16px; border:1px solid var(--mpl-border); border-radius:999px; text-transform:uppercase; letter-spacing:.08em; font-size:11px; font-weight:600; color:var(--mpl-black) !important; transition:border-color .2s, background-color .2s, color .2s; }
.mpl-catnav a:hover{ border-color:var(--mpl-cyan); }
.mpl-catnav a.is-active{ background:var(--mpl-black); color:#fff !important; border-color:var(--mpl-black); }

/* ---------- Trust band ---------- */
/* Flex + wrap so the items break onto multiple lines on narrow screens.
   (As inline spans with no whitespace between them + white-space:nowrap they
   formed one unbreakable row that overflowed the viewport on mobile.) */
.mpl-trust{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 0; background:var(--mpl-black); color:#CFD0D2; padding:15px 16px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.mpl-trust span{ margin:0 14px; white-space:nowrap; }
.mpl-trust b{ color:var(--mpl-cyan); font-weight:600; }

/* ---------- Homepage category grid ---------- */
.mpl-cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.mpl-cat{ background:#fff; border:1px solid var(--mpl-border); border-radius:10px; padding:22px 18px; display:block; color:var(--mpl-black) !important; transition:border-color .2s; }
.mpl-cat:hover{ border-color:var(--mpl-cyan); }
.mpl-cat .nm{ display:block; text-transform:uppercase; letter-spacing:.06em; font-weight:600; font-size:13px; }
.mpl-cat .ct{ display:block; color:var(--mpl-muted); font-size:12px; margin-top:6px; }
.mpl-cat .ar{ display:block; color:var(--mpl-cyan); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; margin-top:16px; }
@media(max-width:782px){ .mpl-cats{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Content page (Science) ---------- */
.mpl-page{ max-width:920px; margin:0 auto; padding:10px 0 30px; }
.mpl-page > p{ font-size:17px; color:#444; line-height:1.7; }
.mpl-page h2{ font-size:25px; margin:36px 0 12px; }
.mpl-std{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:22px 0; }
.mpl-std .card{ border:1px solid var(--mpl-border); border-radius:10px; padding:20px; }
.mpl-std .card h4{ text-transform:uppercase; letter-spacing:.08em; font-size:13px; margin:0 0 8px; }
.mpl-std .card p{ color:#555; font-size:13px; margin:0; line-height:1.6; }
@media(max-width:782px){ .mpl-std{ grid-template-columns:1fr; } }

/* ---------- Product trust list ---------- */
.mpl-trustlist{ list-style:none; margin:20px 0 0; padding:18px 0 0; border-top:1px solid var(--mpl-border); }
.mpl-trustlist li{ font-size:13px; color:#444; margin:0 0 9px; }
.mpl-trustlist b{ color:var(--mpl-black); margin-right:8px; font-weight:600; }

/* ---------- Footer payments line ---------- */
.mpl-fcol .mpl-pay{ color:#6A6A6E; font-size:11px; letter-spacing:.04em; margin-top:12px; }

/* ---------- FAQ accordions ---------- */
.mpl-faq details{ border:1px solid var(--mpl-border); border-radius:10px; margin:0 0 12px; }
.mpl-faq summary{ cursor:pointer; padding:16px 20px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:13px; list-style:none; }
.mpl-faq summary::-webkit-details-marker{ display:none; }
.mpl-faq summary::after{ content:'+'; float:right; color:var(--mpl-muted); font-weight:400; }
.mpl-faq details[open] summary::after{ content:'\2212'; }
.mpl-faq details p{ padding:0 20px 18px; color:#555; margin:0; line-height:1.7; }

/* ---------- Announcement bar ---------- */
#mpl-announce{ position:relative; z-index:5; display:flex; align-items:center; justify-content:center; background:var(--mpl-black); color:#fff; font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:11px 44px; text-align:center; }
#mpl-announce b{ color:var(--mpl-cyan); font-weight:600; }
#mpl-announce-x{ position:absolute; right:16px; top:50%; transform:translateY(-50%); background:none; border:none; color:#888; font-size:20px; line-height:1; cursor:pointer; padding:0; }
#mpl-announce-x:hover{ color:#fff; }
/* keep the header static so the bar sits cleanly above it (no fixed-overlap gap) */
body.et_fixed_nav #main-header, #main-header, #main-header.et-fixed-header{ position:relative !important; top:0 !important; }
#page-container{ padding-top:0 !important; }
@media(max-width:600px){ #mpl-announce{ font-size:10px; letter-spacing:.05em; padding:11px 40px; } }

/* ---------- Hero: two-column with vial ---------- */
.mpl-hero .mpl-wrap{ display:flex; align-items:center; gap:48px; }
.mpl-hero .mpl-hero-copy{ flex:1.25; }
.mpl-hero .mpl-hero-vial{ flex:1.05; position:relative; display:flex; justify-content:center; align-items:center; min-height:460px; }
.mpl-hero .mpl-hero-vial .glow{ position:absolute; width:520px; height:440px; border-radius:50%; background:radial-gradient(ellipse, rgba(0,239,255,.18) 0%, rgba(0,239,255,.06) 42%, rgba(0,239,255,0) 72%); filter:blur(10px); pointer-events:none; }
.mpl-hero .mpl-hero-vial img{ position:relative; width:auto; height:470px; max-width:100%; filter:drop-shadow(0 24px 38px rgba(0,0,0,.5)); }
@media(max-width:782px){ .mpl-hero .mpl-wrap{ flex-direction:column; align-items:flex-start; gap:24px; } .mpl-hero .mpl-hero-vial{ width:100%; min-height:0; } .mpl-hero .mpl-hero-vial img{ height:auto; width:100%; max-width:420px; margin:0 auto; } .mpl-hero .mpl-hero-vial .glow{ width:90%; height:300px; } }

/* ---------- Homepage guarantee strip ---------- */
.mpl-guarantees{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; max-width:980px; margin:0 auto; }
.mpl-guarantees .g{ text-align:center; }
.mpl-guarantees svg{ stroke:var(--mpl-cyan); width:30px; height:30px; }
.mpl-guarantees h3{ font-size:15px; text-transform:uppercase; letter-spacing:.06em; margin:14px 0 6px; font-weight:600; }
.mpl-guarantees p{ color:#666; font-size:13px; margin:0; line-height:1.6; }
@media(max-width:782px){ .mpl-guarantees{ grid-template-columns:1fr; gap:26px; } }

/* ---------- Product page: RUO badge ---------- */
.mpl-ruo-badge{ display:inline-block; border:1px solid var(--mpl-cyan); color:var(--mpl-cyan-ink); background:rgba(0,239,255,.08); border-radius:999px; padding:5px 13px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; margin-bottom:14px; }

/* ---------- Hero: purity line + CTA row ---------- */
.mpl-hero-purity{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin:22px 0 30px; }
.mpl-hero-purity b{ background:rgba(0,239,255,.12); border:1px solid rgba(0,239,255,.4); color:var(--mpl-cyan); border-radius:999px; padding:5px 13px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; }
.mpl-hero-purity span{ color:#9A9A9E; font-size:13px; letter-spacing:.02em; }
.mpl-hero-cta{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }

/* ---------- Narrow content wrap (comparison, FAQ) ---------- */
.mpl-wrap--narrow{ max-width:780px; }

/* ---------- Comparison table ---------- */
.mpl-compare-wrap{ overflow-x:auto; }
.mpl-compare{ width:100%; border-collapse:separate; border-spacing:0; font-size:14px; }
.mpl-compare th, .mpl-compare td{ padding:15px 16px; text-align:center; border-bottom:1px solid var(--mpl-border); vertical-align:middle; }
.mpl-compare thead th{ font-size:12px; text-transform:uppercase; letter-spacing:.07em; font-weight:600; color:var(--mpl-muted); }
.mpl-compare th.feat, .mpl-compare td.feat{ text-align:left; color:var(--mpl-black); font-weight:500; }
.mpl-compare thead th.us{ background:var(--mpl-black); color:#fff; border-radius:10px 10px 0 0; }
.mpl-compare .us{ background:rgba(0,239,255,.06); }
.mpl-compare tbody tr:last-child td{ border-bottom:none; }
.mpl-compare tbody tr:last-child .us{ border-radius:0 0 10px 10px; }
.mpl-compare .yes{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--mpl-cyan); color:var(--mpl-cyan-ink); font-weight:700; font-size:13px; }
.mpl-compare .no{ color:var(--mpl-muted); font-size:13px; }
@media(max-width:600px){ .mpl-compare th, .mpl-compare td{ padding:12px 8px; font-size:12px; } }

/* ---------- Product card: category tag + Best Seller badge ---------- */
.woocommerce ul.products li.product{ position:relative; }
.woocommerce ul.products li.product .mpl-card-cat{ display:block; text-transform:uppercase; letter-spacing:.1em; font-size:10px; font-weight:600; color:var(--mpl-muted); padding:14px 16px 0; }
.woocommerce ul.products li.product .mpl-card-cat + h2,
.woocommerce ul.products li.product .mpl-card-cat + h3,
.woocommerce ul.products li.product .mpl-card-cat + .woocommerce-loop-product__title{ padding-top:3px !important; }
.mpl-bestseller{ position:absolute; top:12px; left:12px; z-index:3; background:var(--mpl-cyan); color:var(--mpl-cyan-ink); border-radius:6px; padding:4px 9px; font-size:10px; letter-spacing:.07em; text-transform:uppercase; font-weight:700; }

/* ---------- Homepage: How we test ---------- */
.mpl-lead{ text-align:center; max-width:680px; margin:0 auto 40px; color:#555; font-size:16px; line-height:1.65; }
.mpl-testflow{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:1040px; margin:0 auto; }
.mpl-testflow .step{ border-top:1px solid var(--mpl-border); padding-top:18px; }
.mpl-testflow .num{ display:block; font-size:12px; font-weight:700; letter-spacing:.16em; color:var(--mpl-cyan); }
.mpl-testflow h3{ font-size:15px; text-transform:uppercase; letter-spacing:.05em; margin:11px 0 8px; font-weight:600; }
.mpl-testflow p{ color:#666; font-size:13px; line-height:1.62; margin:0; }
@media(max-width:782px){ .mpl-testflow{ grid-template-columns:1fr 1fr; gap:28px 22px; } }
@media(max-width:480px){ .mpl-testflow{ grid-template-columns:1fr; } }

/* ---------- Mobile overflow guard ----------
   Safety net: on phones, never let a single stray element create a
   horizontal scrollbar / sideways drag. Root causes are fixed at the
   source; this just prevents any future regression. Scoped to small
   screens so desktop layout is untouched. Media (images/iframes/video)
   are clamped to their container so nothing pushes the page wide. */
@media(max-width:782px){
  html, body{ overflow-x:hidden; max-width:100%; }
  img, video, iframe{ max-width:100%; height:auto; }
}