/*
Theme Name: Cosmic Lens Storefront Child
Theme URI: https://store.cosmiclens.iq
Description: Custom child theme for Cosmic Lens (العدسة الكونية) built on the Storefront theme, matching the brand identity: red accent (#D71A21), Cairo + IBM Plex Sans Arabic fonts, and a redesigned shop page (hero banner, category sidebar, product cards, recommendations, CTA band) plus a mobile filter drawer and a sidebar type/brand filter panel.
Author: Cosmic Lens
Template: storefront
Version: 1.3.2
Text Domain: cosmic-lens-child
*/

/* =========================================================
   1. BRAND VARIABLES
   Change these to adjust the whole site's look from one place.
   ========================================================= */
:root {
  --clq-red: #D71A21;
  --clq-red-dark: #B5141C;
  --clq-red-light: #FBE2E3;
  --clq-dark: #1A1A1A;
  --clq-gray: #6B7280;
  --clq-border-radius: 10px;
  --clq-font-heading: 'Cairo', sans-serif;
  --clq-font-body: 'IBM Plex Sans Arabic', sans-serif;
}

/* =========================================================
   2. TYPOGRAPHY
   ========================================================= */
body,
input,
textarea,
select,
button {
  font-family: var(--clq-font-body);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.woocommerce-loop-product__title,
.product_title,
.widget-title {
  font-family: var(--clq-font-heading);
  font-weight: 700;
}

/* =========================================================
   3. COLORS & ACCENTS
   ========================================================= */
a {
  color: var(--clq-dark);
}
a:hover,
a:focus {
  color: var(--clq-red);
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current-menu-ancestor > a {
  color: var(--clq-red);
}

/* Buttons (Add to cart, checkout, submit, etc.) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
button,
input[type="submit"] {
  background-color: var(--clq-red);
  border-color: var(--clq-red);
  color: #fff;
  border-radius: var(--clq-border-radius);
  transition: background-color .2s ease, transform .15s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
button:hover,
input[type="submit"]:hover {
  background-color: var(--clq-red-dark);
  border-color: var(--clq-red-dark);
  color: #fff;
}

/* Prices */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--clq-red);
  font-weight: 700;
}

/* Sale badge */
.woocommerce span.onsale {
  background-color: var(--clq-red);
  border-radius: 50%;
}

/* Sidebar widgets (category filter, etc.) */
.widget_product_categories li a:hover,
.widget_layered_nav li a:hover,
.widget_product_categories li.chosen > a {
  color: var(--clq-red);
}

/* Footer */
#colophon,
.site-footer {
  background-color: var(--clq-dark);
  color: #CFCFCF;
}
#colophon a,
.site-footer a {
  color: #fff;
}
#colophon a:hover,
.site-footer a:hover {
  color: var(--clq-red);
}

/* =========================================================
   4. PRODUCT CARDS (shop / category grid)
   ========================================================= */
.woocommerce ul.products li.product {
  background: #fff;
  border-radius: var(--clq-border-radius);
  padding: 14px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  transform: translateY(-3px);
}
.woocommerce ul.products li.product img {
  border-radius: calc(var(--clq-border-radius) - 4px);
}

/* =========================================================
   5. MOBILE FILTER DRAWER
   Adds a "تصفية المنتجات" button on the shop page (mobile only)
   that slides the sidebar in as an off-canvas drawer.
   Markup is injected by functions.php; behavior by assets/mobile-filter.js
   ========================================================= */
.clq-filter-toggle {
  display: none;
}
.clq-filter-overlay {
  display: none;
}
.clq-filter-close {
  display: none;
}

@media (max-width: 768px) {
  .clq-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    margin-bottom: 16px;
    background: var(--clq-red);
    color: #fff;
    border: none;
    border-radius: var(--clq-border-radius);
    font-family: var(--clq-font-heading);
    font-weight: 700;
    cursor: pointer;
  }

  /* NOTE: this used to be scoped ".content-area .widget-area", which
     assumed the sidebar (.widget-area / #secondary) was a *descendant*
     of the main content column (.content-area / #primary). On this
     site they're siblings (both children of the same .col-full row),
     so that selector never actually matched anything - scoping to
     the sidebar itself (below) is the fix. */
  .widget-area {
    position: fixed;
    top: 0;
    right: -100%;
    width: 82%;
    max-width: 340px;
    height: 100%;
    background: #fff;
    z-index: 9999;
    overflow-y: auto;
    padding: 20px;
    transition: right .3s ease;
    box-shadow: -8px 0 24px rgba(0, 0, 0, .15);
  }

  body.clq-filter-open {
    overflow: hidden;
  }
  body.clq-filter-open .widget-area {
    right: 0;
  }

  .clq-filter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 9998;
  }
  body.clq-filter-open .clq-filter-overlay {
    display: block;
  }

  .clq-filter-close {
    margin-bottom: 16px;
    background: none;
    border: none;
    font-size: 22px;
    color: var(--clq-dark);
    cursor: pointer;
  }
  body.clq-filter-open .clq-filter-close {
    display: block;
  }
}

/* =========================================================
   6. HERO BANNER (shop page only)
   Full-bleed background photo behind a dark overlay, with the
   store wordmark and a search bar. Background image lives at
   assets/images/hero-bg.jpg - replace that file with any real
   photo (same file name) to change it site-wide.
   ========================================================= */
.clq-hero {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--clq-dark);
  background-image: linear-gradient(180deg, rgba(15, 12, 13, .55), rgba(15, 12, 13, .8)), url('assets/images/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  margin-bottom: 40px;
  overflow: hidden;
}

.clq-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: 32px 20px;
  max-width: 640px;
}

.clq-hero-title {
  font-family: var(--clq-font-heading);
  font-weight: 800;
  font-size: 42px;
  margin: 0 0 12px;
  color: #fff;
}

.clq-hero-subtitle {
  font-family: var(--clq-font-body);
  font-size: 16px;
  color: #E9E9E9;
  margin: 0 0 24px;
  line-height: 1.7;
}

.clq-hero-search {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: var(--clq-border-radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.clq-hero-search-input {
  flex: 1;
  border: none;
  padding: 14px 18px;
  font-family: var(--clq-font-body);
  font-size: 15px;
  outline: none;
}

.clq-hero-search-btn {
  border: none;
  background: var(--clq-red);
  color: #fff;
  padding: 0 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}
.clq-hero-search-btn:hover {
  background: var(--clq-red-dark);
}
.clq-hero-search-btn svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}

@media (max-width: 600px) {
  .clq-hero-title {
    font-size: 30px;
  }
  .clq-hero {
    min-height: 280px;
  }
}

/* =========================================================
   7. CATEGORY SIDEBAR (pill / tree style)
   Restyles the Product Categories widget list to look like a
   hierarchical pill menu, and styles an optional "all products"
   link added above it via a Navigation Menu / Custom Link widget.
   ========================================================= */
.widget_product_categories .widget-title,
.widget-area .widget-title {
  font-size: 17px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--clq-red);
  display: inline-block;
}

.widget_product_categories ul,
.widget_product_categories ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.widget_product_categories li {
  margin: 0 0 4px;
}

.widget_product_categories li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--clq-dark);
  font-size: 14px;
  transition: background-color .15s ease, color .15s ease;
}

.widget_product_categories li a:hover {
  background: var(--clq-red-light);
  color: var(--clq-red-dark);
}

.widget_product_categories li.chosen > a {
  background: var(--clq-red);
  color: #fff !important;
}

.widget_product_categories li ul.children {
  margin: 2px 0 6px 0;
  padding-inline-start: 16px;
  border-inline-start: 2px solid #EEE;
}

.widget_product_categories .count {
  background: #F1F1F1;
  color: var(--clq-gray);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.widget_product_categories li.chosen > a .count,
.widget_product_categories li a:hover .count {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}

/* =========================================================
   8. PRODUCT CARD REDESIGN
   Category badge overlay on the thumbnail, styled star rating,
   and a secondary "اشتري الآن" (Buy Now) button next to
   "Add to cart".
   ========================================================= */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
  position: relative;
  display: block;
}

.clq-cat-badge {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 2;
  background: rgba(26, 26, 26, .82);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  font-family: var(--clq-font-body);
}

.woocommerce ul.products li.product .star-rating {
  margin: 4px 0 2px;
  font-size: 13px;
}
.woocommerce ul.products li.product .star-rating span::before {
  color: var(--clq-red);
}

.woocommerce ul.products li.product .clq-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.woocommerce ul.products li.product .clq-card-actions a.button,
.woocommerce ul.products li.product .clq-card-actions a.added_to_cart {
  flex: 1;
  text-align: center;
  font-size: 13px;
  padding: 10px 8px;
  margin: 0;
}

.woocommerce ul.products li.product a.clq-buy-now-btn {
  background: var(--clq-dark);
  border-color: var(--clq-dark);
}
.woocommerce ul.products li.product a.clq-buy-now-btn:hover {
  background: #000;
  border-color: #000;
}

/* =========================================================
   9. RECOMMENDATIONS CAROUSEL ("استكشف توصياتنا")
   A horizontally-scrolling row of recommended products, shown
   below the main shop grid.
   ========================================================= */
.clq-recs {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  padding: 0 20px;
  margin-top: 48px;
  margin-bottom: 48px;
  box-sizing: border-box;
}

.clq-recs-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.clq-recs-title {
  font-size: 24px;
  margin-bottom: 18px;
}

.clq-recs-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.clq-recs-track::-webkit-scrollbar {
  height: 6px;
}
.clq-recs-track::-webkit-scrollbar-thumb {
  background: #DDD;
  border-radius: 999px;
}

.clq-recs-card {
  flex: 0 0 auto;
  width: 180px;
  scroll-snap-align: start;
  background: #fff;
  border-radius: var(--clq-border-radius);
  padding: 12px;
  text-align: center;
  color: var(--clq-dark);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  transition: box-shadow .2s ease, transform .2s ease;
}
.clq-recs-card:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, .1);
  transform: translateY(-3px);
  color: var(--clq-dark);
}

.clq-recs-card img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--clq-border-radius) - 4px);
  margin-bottom: 8px;
}

.clq-recs-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clq-recs-price {
  display: block;
  font-size: 13px;
  color: var(--clq-red);
  font-weight: 700;
}

/* =========================================================
   10. CTA / TRUST BAND
   Dark band with a WhatsApp contact call-to-action and a row
   of trust badges (warranty, delivery, support).
   ========================================================= */
.clq-cta-band-wrap {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  padding: 0 20px;
  margin-bottom: 40px;
  box-sizing: border-box;
}

.clq-cta-band {
  background: var(--clq-dark);
  color: #fff;
  border-radius: var(--clq-border-radius);
  padding: 36px 24px;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
}

.clq-cta-title {
  font-size: 22px;
  margin-bottom: 10px;
  color: #fff;
}

.clq-cta-text {
  color: #CFCFCF;
  margin-bottom: 20px;
  font-size: 14px;
}

.clq-cta-btn {
  display: inline-block;
}

.clq-trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.clq-trust-item {
  font-size: 13px;
  color: #E4E4E4;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* =========================================================
   11. FOOTER COLUMNS
   ========================================================= */
.site-footer .widget-title {
  color: #fff;
  font-size: 15px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  display: inline-block;
}

.site-footer .widget li {
  margin-bottom: 8px;
}

/* =========================================================
   12. HEADER REDESIGN (v1.2.0)
   Top trust ticker + a tidy two-row header: logo/title, search
   and account link in row 1; category menu and cart in row 2.
   Built entirely with CSS on Storefront's own header markup -
   the only PHP additions are the ticker, the account link, and
   the site-branding override (see functions.php), so this keeps
   working with future Storefront updates.
   ========================================================= */

/* --- Top trust ticker --- */
.clq-topbar {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  overflow: hidden;
  background: var(--clq-dark);
  padding: 8px 0;
}

.clq-topbar-track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  width: max-content;
  animation: clq-marquee 22s linear infinite;
}

.clq-topbar-item {
  color: #fff;
  font-size: 0.85rem;
  font-family: var(--clq-font-body);
}

@keyframes clq-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .clq-topbar-track {
    animation: none;
    flex-wrap: wrap;
    gap: 16px 32px;
  }
}

/* --- Row 1: branding + search + account --- */
.site-header > .col-full {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.clq-site-branding { order: 1; }
.site-header .secondary-navigation { order: 2; }

.site-header .site-search {
  order: 3;
  flex: 1 1 320px;
  max-width: 480px;
}

.clq-header-account {
  order: 4;
  margin-inline-start: auto;
}

.clq-site-branding {
  display: flex !important;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.clq-logo-wrap img {
  max-height: 56px !important;
  width: auto !important;
  display: block;
}

.clq-title-wrap .site-title {
  margin: 0;
  font-family: var(--clq-font-heading);
}

.clq-title-wrap .site-title a {
  color: var(--clq-dark);
  text-decoration: none;
}

.clq-title-wrap .site-description {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: var(--clq-gray);
}

.site-search .woocommerce-product-search {
  display: flex;
  border: 1px solid #E5E7EB;
  border-radius: var(--clq-border-radius);
  overflow: hidden;
}

.site-search .woocommerce-product-search input[type="search"] {
  border: none;
  flex: 1;
  padding: 10px 14px;
  font-family: var(--clq-font-body);
  min-width: 0;
}

.site-search .woocommerce-product-search input[type="search"]:focus {
  outline: none;
}

.site-search .woocommerce-product-search button {
  background: var(--clq-red);
  color: #fff;
  border: none;
  padding: 0 18px;
  cursor: pointer;
}

.clq-header-account {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--clq-dark);
  text-decoration: none;
  font-family: var(--clq-font-body);
  font-size: 0.9rem;
  white-space: nowrap;
}

.clq-header-account svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.clq-header-account:hover {
  color: var(--clq-red);
}

/* --- Row 2: category menu + cart --- */
.storefront-primary-navigation .col-full {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

#site-header-cart.site-header-cart {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

#site-header-cart .cart-contents {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--clq-red);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--clq-border-radius);
  text-decoration: none;
  font-family: var(--clq-font-body);
  font-size: 0.85rem;
  white-space: nowrap;
}

#site-header-cart .cart-contents:hover {
  background: var(--clq-red-dark);
  color: #fff;
}

#site-header-cart .cart-contents .count {
  background: rgba(255, 255, 255, .25);
  padding: 1px 8px;
  border-radius: 999px;
}

/* Hide the mini-cart dropdown widget Storefront prints next to the
   cart link - we only want the simple icon-style link above. */
#site-header-cart .widget_shopping_cart {
  display: none;
}

/* --- Spacing safety net: keep the space above the hero banner tight
   no matter what (if anything) Storefront prints between the header
   and the shop content - breadcrumbs, a header widget area, etc. --- */
.storefront-breadcrumb,
.header-widget-region {
  margin: 0 !important;
  padding: 6px 0 !important;
}

/* --- New "تسوق الآن" button in the hero, between the subtitle and
   the search bar --- */
.clq-hero-cta {
  display: inline-block;
  margin-top: 18px;
  margin-bottom: 22px;
  background: var(--clq-red);
  color: #fff;
  padding: 12px 32px;
  border-radius: var(--clq-border-radius);
  font-family: var(--clq-font-heading);
  font-weight: 700;
  text-decoration: none;
}

.clq-hero-cta:hover {
  background: var(--clq-red-dark);
  color: #fff;
}

@media (max-width: 768px) {
  .clq-topbar-item {
    font-size: 0.75rem;
  }

  .site-header > .col-full {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .clq-account-label {
    display: none;
  }
}

/* =========================================================
   13. SIDEBAR FILTER PANEL (نوع المنتج + العلامة التجارية)
   A collapsible checkbox filter panel (product type + brand),
   each option with a live count, plus an "تطبيق" apply button -
   printed in the sidebar (right side on this RTL layout) on shop
   / category / tag pages. Replaces the default Product Categories
   widget list (hidden below) so there's one clear filtering tool
   instead of two overlapping ones. Uses native <details>/<summary>
   for the collapse/expand animation, so no extra JS is required.
   ========================================================= */
.widget_product_categories {
  display: none;
}

.clq-filter-panel {
  background: #fff;
  border: 1px solid #EFEFEF;
  border-radius: var(--clq-border-radius);
  padding: 18px;
  margin-bottom: 24px;
}

.clq-filter-panel .widget-title {
  margin-top: 0;
}

.clq-filter-group {
  border-bottom: 1px solid #F0F0F0;
  padding: 14px 0;
}
.clq-filter-group:first-of-type {
  padding-top: 0;
}
.clq-filter-group:last-of-type {
  border-bottom: none;
}

.clq-filter-group summary {
  cursor: pointer;
  font-family: var(--clq-font-heading);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--clq-dark);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.clq-filter-group summary::-webkit-details-marker {
  display: none;
}
.clq-filter-group summary::after {
  content: '\002B';
  font-size: 18px;
  line-height: 1;
  color: var(--clq-gray);
  transition: transform .15s ease;
}
.clq-filter-group[open] summary::after {
  transform: rotate(45deg);
}

.clq-filter-options {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
}

.clq-filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-size: 13.5px;
  color: var(--clq-dark);
  cursor: pointer;
}

.clq-filter-option input[type="checkbox"] {
  accent-color: var(--clq-red);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.clq-filter-option-label {
  flex: 1;
}

.clq-filter-option-count {
  color: var(--clq-gray);
  font-size: 11.5px;
}

.clq-filter-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}

.clq-filter-apply {
  flex: 1;
  text-align: center;
  padding: 11px;
  font-size: 14px;
}

.clq-filter-clear {
  font-size: 13px;
  color: var(--clq-gray);
  text-decoration: underline;
  white-space: nowrap;
}
.clq-filter-clear:hover {
  color: var(--clq-red);
}

/* --- Sort dropdown above the product grid: WooCommerce already
   prints this by default (woocommerce_catalog_ordering) on every
   shop/category/tag archive - this just styles it to match the
   brand instead of the plain browser-default select box. --- */
.woocommerce-ordering {
  margin: 0 0 20px;
}
.woocommerce-ordering select {
  border: 1px solid #E5E7EB;
  border-radius: var(--clq-border-radius);
  padding: 9px 14px;
  font-family: var(--clq-font-body);
  font-size: 13.5px;
  color: var(--clq-dark);
  background: #fff;
  cursor: pointer;
}
.woocommerce-result-count {
  color: var(--clq-gray);
  font-size: 13.5px;
}

/* --- Force the content column + sidebar to actually sit side by
   side on shop/category/tag pages. On this install, #primary
   (.content-area) and #secondary (.widget-area) are both floated
   correctly (and with enough combined width to fit on one line),
   but they still render stacked - so this replaces float layout
   with flexbox for just this row, which is more predictable.
   Scoped to .clq-shop-layout (added via body_class() in
   functions.php) so it only touches the pages the filter panel
   is on. The sidebar gets order:1 (before the content, order:2)
   so it lands on the *start* side of the row, which is the right
   in this RTL layout - matching where the panel is meant to be. --- */
.clq-shop-layout #content.site-content > .col-full {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px;
}
.clq-shop-layout #content.site-content > .col-full > .content-area {
  float: none;
  width: auto;
  margin: 0;
  flex: 1 1 560px;
  order: 2;
}
.clq-shop-layout #content.site-content > .col-full > .widget-area {
  float: none;
  width: 260px;
  margin: 0;
  flex: 0 0 260px;
  order: 1;
}

@media (max-width: 768px) {
  .clq-shop-layout #content.site-content > .col-full {
    display: block;
  }
}